时间戳

首页 > 解决方案 > 我如何在水平行中对齐 react-native 按钮

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

问题描述

我有 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
     }, 
});

标签： cssreactjsreact-nativebuttondisplay

解决方案

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

推荐阅读