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

Question

I have 8 buttons which i would like to align in horizontal row, side by side. everything i have tried hasn't worked and the just display one on top of another.

Here's what i have at the mo. Thanks

               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

I think, in this case, the flex items are the buttons. But the problems lies in the flex container: TouchableOpacity.
As your code suggest, there is one flex container for one button, and that is repeated by the map function.
It should be one flex container for all flex items (buttons). That means, the flex container should be outside of your map function and the items directly as its children (that are mapped by the map function).