如何从一个Tab Navigator发送数据到另一个?

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>  

我需要从堆栈'Train'发送参数到堆栈'统计'，我怎么能做到这一点，请帮助

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