使用柔性包装

我试图创建项目符号列表，看起来像这样阵营本地项目符号列表：使用柔性包装

但我结束了与此相反：

React-native似乎不喜欢我使用嵌套的弹性盒。但我不确定如何表达对所有3行元素（子弹，粗体文本和普通文本）的需求，以内联方式显示，并在必要时包装到下一行。

这是我反应过来的本地代码：

var styles = StyleSheet.create({ 
    textWrapper: { 
     flexWrap: 'wrap', 
     alignItems: 'flex-start', 
     flexDirection: 'row', 
    }, 
    textBlock: { 
     flexWrap: 'wrap', 
     alignItems: 'flex-start', 
     flexDirection: 'row' 
     position: 'absolute', 
     left: 10 
    }, 
    boldText: { 
     fontWeight: 'bold', 
    }, 
    normalText: { 
    } 
}); 

<View style={ styles.textWrapper }> 
    <Text>{'\u2022'}</Text> 
    <View style={ styles.textBlock }> 
     <Text style={ styles.boldText }>{categoryName + ':'}</Text> 
     <Text style={ styles.normalText }>{value}</Text> 
    </View> 
</View>

来源

2016-11-05 Wookiem

这里就是我终于想出了......我需要把项目符号和项目符号文本分成不同的列。我不知道为什么我必须为列指定一个宽度，但留下宽度或使用flex：1不适合我。

感谢Nader建议构成解决方案的一部分的嵌套文本块。

var styles = StyleSheet.create({ 
    column: { 
     flexDirection: 'column', 
     alignItems: 'flex-start', 
     width: 200 
    }, 
    row: { 
     flexDirection: 'row', 
     alignItems: 'flex-start', 
     flexWrap: 'wrap', 
     flex: 1 
    }, 
    bullet: { 
     width: 10 
    }, 
    bulletText: { 
     flex: 1 
    }, 
    boldText: { 
     fontWeight: 'bold' 
    }, 
    normalText: { 
    } 
}); 

<View style={ styles.column }> 
    <View style={ styles.row }> 
     <View style={ styles.bullet }> 
      <Text>{'\u2022' + " "}</Text> 
     </View> 
     <View style={ styles.bulletText }> 
      <Text> 
       <Text style={ styles.boldText }>{keyString + ": "}</Text> 
       <Text style={ styles.normalText }>{textEntry}</Text> 
      </Text> 
     </View> 
    </View> 
</View>

来源

2016-11-06 15:09:15 Wookiem

尝试它包裹在一个单一的文本块：

<View style={ styles.textBlock }> 
    <Text>{'\u2022'} 
     <Text style={ styles.boldText }>{categoryName + ':'}</Text> 
     <Text style={ styles.normalText }>{value}</Text> 
    </Text> 
</View>

来源

2016-11-05 22:35:22

此建议会导致文本在项目符号之后继续（根据需要），但是文本换行不起作用（即文本只是在右边被截断）。 – Wookiem

如果出现这种情况，您可能需要现在添加自动换行。 –

很棒，upvote ..我需要一个咨询：作为*反应本地*标签的顶级用户，你认为它学习它值得吗？！有人说这是完美的，别人说这是一个可怕的想法..所以我很困惑，我想要制作一个移动应用程序（Android和iOS操作系统），好吧，有可能通过*反应本机制作专业应用程序*？还是反应本土只是让我们做初学者的应用程序？另外，通过*反应native *创建的应用程序的质量如何？谢谢 – Shafizadeh

使用柔性包装

回答

相关问题