如何在React Native中实现8个按钮的水平并排排列？

嘿，我明白你现在的困扰——8个按钮死活不肯水平排列，一直垂直堆叠对吧？咱们来看看问题出在哪，然后快速搞定它！

问题根源分析 #

你目前的代码里，每个按钮都被单独包裹在一个<View style={styles.catButtons}>中，而且这个样式只设置了flexWrap: 'wrap'却没指定flexDirection: 'row'，再加上最外层的<View>没有启用flex布局，导致每个按钮的外层View都是默认的垂直块级布局，自然就堆叠起来了。

修复方案 #

我们只需要做几个小调整：

• 给最外层的容器添加flex布局，让它负责整体的水平排列和换行逻辑
• 去掉每个按钮外层多余的<View>，避免嵌套布局干扰
• 调整样式配置，把布局属性放到正确的容器上

修改后的完整代码 #

categories: ['art', 'funny', 'inspire', 'life', 'love', 'management', 'sports', 'students'],
render() {
  let cat = this.state.categories.map((value, key) => {
    return (
      <TouchableOpacity style={styles.buttonContainer} key={key} activeOpacity={0.7} >
        <Button style={styles.button} color={'darkslategrey'} title={value} onPress={() => { this.getCategoryQuote(value) }} />
      </TouchableOpacity>
    )
  })
  return (
    <View style={styles.buttonRowContainer}>
      {cat}
    </View>
  )
}
const styles = StyleSheet.create({
  buttonRowContainer: {
    flexDirection: 'row', // 设置水平排列
    flexWrap: 'wrap',     // 超出宽度自动换行
    paddingHorizontal: 10 // 可选：给容器加左右内边距，避免按钮贴边
  },
  buttonContainer: { 
    width: 125, 
    margin: 10 
  },
});

额外说明 #

• flexDirection: 'row'是让容器内的元素水平排列的核心属性
• flexWrap: 'wrap'保证当按钮总宽度超过容器宽度时，会自动换行到下一行
• 我额外加了paddingHorizontal是为了优化视觉效果，你可以根据自己的需求调整或者去掉

内容的提问来源于stack exchange，提问作者Peter Snee