React Native: как отображать содержимое на следующей строке, а не выходить из просмотра

Question

Я создаю собственное приложение для реагирования и пытаюсь отобразить несколько блоков в строке. Проблема в том, что количество отображаемых блоков может варьироваться в зависимости от различных обстоятельств, и, таким образом, бывают случаи, когда количество блоков слишком велико и, таким образом, go за пределами конца представления, в котором они отображаются (блоки не переносятся к следующей строке в представлении, которую я хочу, чтобы они сделали). Код, который я использую для этого, можно увидеть ниже:

<View style={{height: '100%', width:'100%', flexDirection: 'row', flexWrap: 'wrap', justifyContent:'flex-start'}}>
                        {props.boxes.map((element, index) => {
                            return (
                                <View key={index} style={{flexDirection:'row'}}>
                                    <Box color={color}/>
                                    <Text>Some Text Here</Text>
                                </View>
                            )
                        })}
</View>

Какое свойство я могу добавить, чтобы поля переходили в следующую строку представления, когда они достигают края представления? Спасибо!

Answer 1

Используйте:

style={{flex: 1, flexWrap: 'wrap'}}

OR

flexShrink: 1 вместо flex:1.

Это уже ошибка, и использование любого из вышеперечисленных ответы должны решить вашу проблему. попробуйте поиграть с размером width.

<Text style={{flex: 1, flexWrap: 'wrap'}}> Some Text Here Some Text Here Some Text Here Some Text Here Some Text Here Some Text Here Some Text Here Some Text Here
   </Text>