在这个例子中，我试图在一个列表项中显示两个不同的东西。
问题是我无法找到如何显示行左侧的“item.date”和“Click to show”。 该行右侧的字符串。
图片的代码示例如下:
<Text style={styles.textline}>{"\n"+item.date}<Text style={styles.continuetext}>{Array(22).fill('\t').join('')}Click to show.</Text></Text>
我已经设法通过向字符串添加多个“\t”来做到这一点，但这是一个糟糕的解决方案，它可以根据屏幕大小进行更改。
而且我已经尝试将两个文本标签包装在一个 View 标签中，并将 Prop “flex:1”提供给 View 标签，然后将文本标签 Prop “alignSelf:”flex-end““没有要么工作。
编辑:我曾尝试将文本包装在评论中提到的 View 中，但没有奏效。
完整代码在这里:
return( <ListItem thumbnail key={i}>
<Thumbnail square source={{ uri: 'url' }} />
<Body>
<TouchableScale transparent onPress={ ()=>{ Linking.openURL(item.url)}}
Component={TouchableScale}
friction={90}
tension={100}
activeScale={0.95}>
<Text>{item.head+"\n"}</Text>
<Text note numberOfLines={2}>{item.details}</Text>
<View style={{ flex:1,justifyContent: 'space-between', flexDirection: 'row' }}>
<Text style={{ fontSize:12,color: 'gray'}}>{"\n"+item.date}</Text>
<Text style={{ fontSize:12,color: '#143f90'}}>Click to show.</Text>
</View>
</TouchableScale>
</Body>
</ListItem>);
我是 React Native 的新手，任何帮助都会很棒。
最佳答案
你可以这样做:
<View style={{ flex: 1, justifyContent: 'space-between', flexDirection: 'row' }}>
<Text>{item.date}</Text>
<Text>Click to show</Text>
</View>
关于javascript - 如何使用 React Native 在一行中创建两个具有不同对齐方式的文本标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64540826/