Jestem nowy z reagującą ojczystą i mam problem z elementami interfejsu użytkownika. Używam przy użyciu przycisków z reagującą-natywnych grupami i masz bardzo trudny czas obroty, jak grupować przyciski na dwie kolumny.

Obecnie mam je tak: Aktualny układ przycisku

Chcę je grupować w takich kolumnach:

Przyciski zgrupowane zgodnie z potrzebami

Oto kod:

import {Text, StyleSheet, View} from 'react-native'
import {ButtonGroup} from 'react-native-elements';

export default function Form(props) {

    const buttons = [ 'Apples', 'Bananas', 'Oranges', 'Pears', 'Peaches']

    return (
        <View style = {styles.container}>
        <Text style = {styles.text}>Which fruit would you like? </Text>
          <ButtonGroup
            containerStyle={styles.buttonContainer}
            buttonStyle ={styles.button}
            buttons = {buttons}
          />

        </View>

    )
}

const styles = StyleSheet.create({
    container: {
        marginTop: 200,
        alignItems: 'center',
        justifyContent: 'center',
      },
    buttonContainer: {
        flexWrap: 'wrap'
    }

})

Jak widać, obecnie mam flekswrap ustawiony na "Wrap" w pojemniku przycisku, który nie miał pożądanego efektu. Próbowałem dodać różne style CSS, ale wydaje się, że komponent po prostu nie pozwala na ten poziom dostosowywania. Czy jest jakiś sposób na nadpisanie tego, czy będę musiał ręcznie wdrożyć podobną grupę przycisków?

1
http.nora 16 kwiecień 2021, 19:57

1 odpowiedź

Najlepsza odpowiedź

Aby wyświetlić polecenia Flex, nie potrzebujesz display: 'flex' we wszystkich swoich stylach? Spróbuj również używać flexDirection: 'column' lub direction: 'column' w stylu container. W ten sposób mówisz pojemnikowi, aby wyświetlić wszystkie dzieci w kolumnie.

0
cesray 16 kwiecień 2021, 17:05