如何將數據從一個選項卡導航器發送到另一個？

Question

我有一個像這樣的結構：

    <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>  

我需要將參數從 Stack 'Train' 發送到 Stack 'Statistics'，我該怎么做，請幫忙

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

//and take it in the Statistics component

我嘗試：

routse.params.count 

但它不起作用。 請幫助

Answer 1

嘗試將count和setCount作為組件參數傳遞：

 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> ); }