Question

有什么办法可以在图片中显示文字？

这是我当前的代码：

render() {
    return (
        <View style={{flex: 1}}>
            <ScrollView scrollEnabled={true}>
                <View style={{ flexDirection: 'row' }}>
                    <Text style={styles.badge}>lorem</Text>
                    <Text style={styles.badge}>lorem ipsum lorem</Text>
                    <Text style={styles.badge}>lorem</Text>
                    <Text style={styles.badge}>lorem ipsum lorem</Text>
                    <Text style={styles.badge}>lorem</Text>
                    <Text style={styles.badge}>lorem ipsum lorem</Text>
                    <Text style={styles.badge}>lorem</Text>
                    <Text style={styles.badge}>lorem ipsum lorem</Text>
                </View>
            </ScrollView>
        </View>
    );
}

const styles = StyleSheet.create({
  badge: { 
    backgroundColor: '#f16622',
    color: '#fff',
    padding: 5, 
    marginRight: 5, 
    alignSelf: 'flex-start', 
    borderRadius: 4 
  }
});

但是我的代码无法像我想要的图片那样显示。而不是全部显示，而是这样：

Answer 1

您需要将子元素包装在View中。使用flexbox，您拥有flexWrap属性，它定义了flex项目是被强制排成一行还是可以被包装。默认情况下，它设置为nowrap。将其设置为换行：将<View style={{ flexDirection: 'row' }}>更改为<View style={styles.badgeContainer}>

    <View style={styles.badgeContainer}>
       <Text style={styles.badge}>lorem</Text>
       <Text style={styles.badge}>lorem ipsum lorem</Text>
       <Text style={styles.badge}>lorem</Text>
       <Text style={styles.badge}>lorem ipsum lorem</Text>
       <Text style={styles.badge}>lorem</Text>
       <Text style={styles.badge}>lorem ipsum lorem</Text>
       <Text style={styles.badge}>lorem</Text>
       <Text style={styles.badge}>lorem ipsum lorem</Text>
    </View>

并尝试将以下样式应用于徽章容器View。

badgeContainer:{
  flex:1,
  flexDirection: 'row',
  flexWrap: 'wrap'
}

在React Native中内联显示文本

1 个答案: