Я сопоставляю this.props.league, чтобы создать эти флажки
Я хочу, чтобы каждый элемент выбора флажка располагался в строке слева направо.
Как мне это сделать, когда у меня есть неопределенное количество предметов?
Это мой рендер:
<View style = {{marginTop: 22}}>
<Modal
animationType = "slide"
transparent = {false}
visible = {this.state.modalVisible}
onRequestClose = {() => {
Alert.alert('Modal has been closed.');
}}
>
<View
style = {{
marginTop: 100
}}
>
<TouchableHighlight
onPress = {() => {
this.setModalVisible(!this.state.modalVisible);
}}
>
<Text>Hide Modal</Text>
</TouchableHighlight>
<Text>Leagues</Text>
{this.props.league === null ?'' : this.props.league.map(
(v, i) => {
return(
<View
key = {i}
style = {{
}}
>
<Check
checked = {this.state.checked[i]}
index = {i}
acronym = {v.acronym}
changeCheck = {this.changeCheck}
/>
<Text>{v.acronym}</Text>
</View>
)
}
)}
</View>
</Modal>
<TouchableHighlight
onPress = {() => {
this.setModalVisible(true);
}}>
<Text>Show Modal</Text>
</TouchableHighlight>
</View>
Я попробовал несколько разных вариантов, но ни один из них не смог расположить их рядом.
Вам нужно предоставить родительский вид стиля флажка, чтобы показать все элементы в строке
flexDirection: 'row'
И если у вас есть массив, поэтому вы можете использовать плоский список для отображения в виде списка, также у него есть возможность показать количество столбцов, например, если вы хотите показать 2 флажка в строке, вы можете сделать как
<FlatList
numColumns = {2}
....
/>