在React Native屏幕之间传递数据(从屏幕A到屏幕B再到屏幕C)。

考虑以下情况。基本上我们有一个 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

给TA打赏
共{{data.count}}人
人已打赏
未分类

在 react 中从本地 json 文件中检索数据。

2022-9-23 11:11:43

未分类

UWP XAML自定义命令栏切换按钮。

2022-9-23 11:11:49

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索