Отобразить текст на встроенном языке - PullRequest
Новая
       13

Отобразить текст на встроенном языке

0 голосов
/ 01 ноября 2018

Можно ли как-нибудь отобразить такой текст на картинке?

enter image description here

Это мой текущий код: 

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

Но мой код не может отображаться так, как на картинке, которую я хочу. Вместо того, чтобы отображать их все, это стало так:

enter image description here

1 Ответ

0 голосов
/ 01 ноября 2018

Вам нужно обернуть ваши дочерние элементы в 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'
}
...