如何将数据从一个选项卡导航器发送到另一个？

Question

I have an a structure like:

    <Tab.Navigator
            
            }}>
                <Tab.Screen name="Train" component={Train} options={{
                    tabBarIcon: ({focused}) => (
                        <View>
                            <Image
                            source={focused ? require('../assets/images/train_use.png') : require('../assets/images/train.png') }
                            style={{
                                width: 50,
                                height: 50,
                            }}
                            resizeMode='contain'/>
                        </View>
                    ),
                }}/>
                
                <Tab.Screen name="Result" component={Result} options={{
                tabBarButton: () => null,
                tabBarStyle: { display: "none" }}}/>

                <Tab.Screen name="Statistics" component={Statistics} initialParams={{ wordsInText: 0 }} options={{
                    tabBarIcon: ({focused}) => (
                    ),
                }}/>
                <Tab.Screen name="Profile" component={Profile} options={{
                tabBarIcon: ({focused})>
                ),
                }}/>
            </Tab.Navigator>  

I need to send params from Stack 'Train' into the stack 'Statistics', how can i do it, pls help

const [count, setCount] = useState(0); // I need to take this value in Train component

//and take it in the Statistics component

I try:

routse.params.count 

But it doesn't work. Pls, help

Answer 1

Try to pass count and setCount as components params:

 import {Button, Text, View} from 'react-native'; import {SafeAreaProvider} from 'react-native-safe-area-context'; import {NavigationContainer} from '@react-navigation/native'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import {useState} from "react"; const Tab = createBottomTabNavigator(); function Train({count, setCount}: { count: number, setCount: Function }) { return ( <View> <Text>Train: {count}</Text> <Button onPress={() => setCount(count + 1)} title={'up'}/> </View> ); } function Result({count, setCount}: { count: number, setCount: Function }) { return ( <View> <Text>Result: {count}</Text> <Button onPress={() => setCount(count + 1)} title={'up'}/> </View> ); } export default function App() { const [count, setCount] = useState(0); return ( <SafeAreaProvider> <NavigationContainer> <Tab.Navigator> <Tab.Screen name="Train" component={() => <Train count={count} setCount={setCount}></Train>} /> <Tab.Screen name="Result" component={() => <Result count={count} setCount={setCount}></Result>} /> </Tab.Navigator> </NavigationContainer> </SafeAreaProvider> ); }