如何在水平行中对齐反应原生按钮

Question

我有 8 个按钮，我想将它们并排排列在水平行中。 我尝试过的所有方法都没有奏效，只是将一个显示在另一个之上。

这是我在MO所拥有的。 谢谢

categories: ['art', 'funny', 'inspire', 'life', 'love', 'management', 'sports', 'students'],

render() {
let cat = this.state.categories.map((value, key) => {
return (
<View style={styles.catButtons}>
<TouchableOpacity
style={styles.buttonContainer}
key={key}
activeOpacity={0.7}
>
<Button style={styles.button}
color={'darkslategrey'}
key={key}
title={value}
onPress={() => { this.getCategoryQuote(value) }}
/>
</TouchableOpacity>
</View>
)
})
return (
<View>
{cat}
</View>
)
}
const styles = StyleSheet.create({
catButtons: {
flexWrap: 'wrap'
},
buttonContainer: {
width: 125,
margin: 10
}, 
});

Answer 1

我认为，在这种情况下，弹性项目就是按钮。但问题在于柔性容器：可触摸不透明度。
正如您的代码所建议的那样，一个按钮有一个 flex 容器，并由 map 函数重复。
它应该是所有弹性项目(按钮(的一个弹性容器。这意味着，flex 容器应该位于映射函数之外，并且项目直接作为其子项(由映射函数映射(。