Текст не переносится и становится на экран реагировать родным

Question

У меня есть компонент, который покажет список элементов с двумя Text рядом друг с другом.один для заголовка и один для содержания.Вот моя реализация рендеринга:

let items = [
    {title: 'Test Test:', value: 'Long Test Long Test Long Test Long Test Long Test Long Test Long Test'},
    {title: 'Test:', value: 'Short Test Test Test'},
];
return (<FlatList
        style={{flex: 1, width: Dimensions.get('window').width}}
        data={items}
        renderItem={({item}) =>
            <View style={{flexDirection: 'row', width: Dimensions.get('window').width}}>
                <Text style={{color: colors.accentColor}}>{item.title}</Text>
                <Text>{item.value}</Text>
            </View>
        }/>);

проблема в том, что текст не обернут, и он выходит из экрана, когда это длинный текст.Как я могу это исправить?

Answer 1

Я воспроизвел ваше дело, и мне удалось правильно обернуть, добавив свойство flex: 1 в ваш длинный текст:

<View style={{flexDirection: 'row', width: Dimensions.get('window').width}}>
    <Text style={{color: "red"}}>{item.title}</Text>
    <Text style={{flex: 1}}>{item.value}</Text>
</View>

Скажите, работает ли оно для вас!

Answer 2

Вы можете обернуть свой контент в компонент с размером экрана width.

. Вычислить width, используя пакет Dimensions.

let fullWidth = Dimensions.get('window').width

Затем присвойте эту ширину style объекту {width: fullWidth}

Надеюсь, что это решит:)