文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用React本机在一行中创建两个不同对齐的文本标记？

问如何使用React本机在一行中创建两个不同对齐的文本标记？
EN

Stack Overflow用户

提问于 2020-10-26 16:06:40

回答 1查看 67关注 0票数 3

在本例中，我试图在listitem中显示两种不同的内容。

问题是，我无法找到如何在行左侧显示"item.date"，以及如何在行右侧显示"Click“字符串。

有空间的解

图像的代码示例如下：

<Text style={styles.textline}>{"\n"+item.date}<Text style={styles.continuetext}>{Array(22).fill('\t').join('')}Click to show.</Text></Text>

我通过在字符串中添加多个"\t“来做到这一点，但是这是一个糟糕的解决方案，它可以根据屏幕大小进行更改。

我已经尝试过将两个文本标签包装在一个视图标记中，并将道具"flex:1“给视图标签，然后给出文本标记"alignSelf："flex-end”也不起作用。“

编辑:我试图将文本包装在一个视图中，如评论中提到的那样，但没有起作用。

这里的完整代码：

 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>);

我有点新的反应本地人，任何帮助都会很好。

回答 1

Stack Overflow用户

发布于 2020-10-26 16:10:42

你可以这样做：

<View style={{ flex: 1, justifyContent: 'space-between', flexDirection: 'row' }}>
  <Text>{item.date}</Text>
  <Text>Click to show</Text>
</View>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64540826

复制

相似问题

问如何使用React本机在一行中创建两个不同对齐的文本标记？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用React本机在一行中创建两个不同对齐的文本标记？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用React本机在一行中创建两个不同对齐的文本标记？
EN