我如何在水平行中对齐 react-native 按钮

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

我认为，在这种情况下，弹性项目是按钮。但是问题出在弹性容器上：TouchableOpacity.
正如您的代码所建议的那样，一个按钮有一个 flex 容器，并且由 map 函数重复。
它应该是所有弹性项目（按钮）的一个弹性容器。这意味着，flex 容器应该在您的 map 函数之外，并且项目直接作为其子项（由 map 函数映射）。

我如何在水平行中对齐 react-native 按钮

How do i align react-native buttons in a horizontal row

css

button

reactjs

react-native

display