web-dev-qa-db-fra.com

Comment passer des accessoires au composant Screen avec un navigateur d'onglets?

Ceci est mon premier article sur SO, alors excuses si je ne suis pas le bon format. Je construis ma première application et j'ai rencontré un gros problème. Il est construit avec le navigateur d'onglets de React Navigation v 5.x.

Ce que je veux réaliser, c'est:

  1. Apportez des modifications à une liste de données dans l'un de mes écrans.
  2. Ces modifications affectent-elles ce qui se passe sur un autre écran.

J'ai essayé ceci https://reactnavigation.org/docs/hello-react-navigation/#passing-additional-props (je ne parviens pas à définir les accessoires à transmettre)

et ceci React Native - passer les accessoires d'un écran à un autre écran (en utilisant le navigateur d'onglets pour naviguer) (version obsolète de react-navigation)

et ceci https://stackoverflow.com/a/56764509/12974771 (Aussi ancienne version de react-navigation)

et Redux mais il n'y a pas d'exemples disponibles avec la version actuelle de React Navigation.

Je suis au bout de ma corde avec cela et j'ai vraiment besoin d'une étape par étape pour y parvenir. Voici un aperçu de ce que je veux faire: https://i.stack.imgur.com/rbSCL.png

La façon dont j'y ai pensé envoie l'état parent en tant qu'accessoires via un rappel, mais je ne trouve pas de moyen d'envoyer des accessoires via les composants de l'écran dans la version à jour de React Navigation ...

Voici ma configuration de navigation:

const Tab = createBottomTabNavigator()

export default class MyApp extends Component{

    constructor(props) {
        super(props);

      }
    render(){
            return (

                   <NavigationContainer>
                        <Tab.Navigator 
                            screenOptions={({ route }) => ({
                            tabBarIcon: ({ focused, color, size }) => {
                                let iconName;

                                if (route.name === 'My tests') {
                                iconName = focused
                                    ? 'ios-list-box'
                                    : 'ios-list';
                                } else if (route.name === 'Testroom') {
                                iconName = focused ? 'ios-body' : 'ios-body';
                                }


                                return <Ionicons name={iconName} size={size} color={color} />;
                            },
                            })}
                            tabBarOptions={{
                            activeTintColor: 'tomato',
                            inactiveTintColor: 'gray',

                            }}
                        >
                            <Tab.Screen name="My tests"  component={MyTests}/> //This is where I want to send props
                            <Tab.Screen name="Testroom" component={TestRoom} />  //This is where I want to send props

                        </Tab.Navigator>
                    </NavigationContainer>

J'ai lu ceci https://reactnavigation.org/docs/redux-integration mais cela n'a aucun sens pour moi. Comment cela s'inscrit-il dans un arbre de composants? Qu'est-ce qui va où? Veuillez aider!

reactjsreact-nativereact-reduxparameter-passingreact-props
5
weedskurt

vous pouvez utiliser ce qui suit

<Tab.Screen name="Favourite" component={() => <RecipeList CategoryId={0}></RecipeList>}/>

Vous pouvez déclencher un avertissement de perte de l'état actuel en raison du nouveau rendu du composant. mais les accessoires fonctionneront. Si vous souhaitez copier les accessoires de l'état actuel, vous pouvez utiliser {... props}

0
Dipankar Dutta

Pour envoyer des accessoires à <MyTests /> composant, à l'intérieur de <Tab.Screen />:

<Tab.Screen name="My tests">
  {() => <MyTests myPropsName={myPropsValue} />}
</Tab.Screen>
0
Alessandro Foolish Ciak DAnton