考虑以下情况。基本上我们有一个 MaterialTopTabNavigator
嵌套 StackNavigator
.
我如何将我的数据从函数一直传递给 MaterialTopTabNavigator
. 注意到 MaterialTopTabNavigator
先要经过 StackNavigator
file1.js
const[test,setTest] = useState('testing');
function moveToResults(){
navigation.navigate('Results', test)
}
在这里,我们有一个简单的函数,它使应用程序导航到不同的屏幕,它通过状态的 test
. 当 moveToResults()
被调用,它将我们带到。
file2. js /注意,PostFun是StackNavigator的主页面。
const Tab = createMaterialTopTabNavigator();
function PostFun({navigation}) {
return (
<Tab.Navigator
initialRouteName="Feed"
activeColor="#e91e63"
tabBarOptions={{
labelStyle: {fontSize:12, color:"#faa19b"},
tabStyle: {height:65, justifyContent: "flex-end"},
}}
style={styles.header}>
<Tab.Screen name="Activity" component={FindFunActivity} />
<Tab.Screen name="Event" component={FindFunEvent} />
</Tab.Navigator>
);
}
file2.js是`MaterialTopTabNavigator的开始,正如你所看到的,这个导航有两个顶部标签(Activity和Event)。
其中一个标签页可能看起来像,这就是我需要我的变量显示的地方。
file3.js
const FindFunEvent = (navigation) =>{
return(
<View>
<Text>{navigation.getParam()}</Text>
</View>
)
}
这个问题
我如何获得我的 test
中显示的变量。FindFunEvent
组件?
这比什么都难解释,如果你愿意的话,这里有一个视觉效果。
你可以通过将值作为组件的prop传递来实现这个功能。
file1.js
const[test, setTest] = useState('testing');
function moveToResults(){
navigation.navigate('Results', { test: test })
}
file2.js
const Tab = createMaterialTopTabNavigator();
function PostFun({ route, navigation }) {
const { test } = route.params;
return (
<Tab.Navigator
initialRouteName="Feed"
activeColor="#e91e63"
tabBarOptions={{
labelStyle: {fontSize:12, color:"#faa19b"},
tabStyle: {height:65, justifyContent: "flex-end"},
}}
style={styles.header}
>
<Tab.Screen name="Activity">
{ (props) => <FindFunActivity {...props} myProp='test' /> }
</Tab.Screen>
<Tab.Screen name="Event" component={() => <FindFunEvent test={test} />} />
</Tab.Navigator>
);
}
file3.js
const FindFunEvent = ({ test }) => {
return(
<View>
<Text>{ test }</Text>
</View>
)
}
类似的例子可以在这里查看。https:/snack.expo.ioUDHVnSUwK
假设你想导航并将在屏幕A中得到的值传递到屏幕B和屏幕C,你可以做这样的事情。
屏风A
this.props.navigation.navigate('ScreenB',
{value: 'hi', });
}
屏幕B
this.props.navigation.navigate('ScreenC',
this.props.route.params.value);
}
屏幕C
this.props.route.params.value
一个简单的方法是用一个 global.data
. 当你使用全局变量时,你可以在应用程序中的任何地方使用它。但这并不理想,因为使用全局不是编程的最佳实践。我并不完全确定你所尝试的是否可行,如果不可行,你可以求助于使用全局。