在 React Native 屏幕之间传递数据（从屏幕 A 到屏幕 B 再到屏幕 C）

Question

考虑以下场景。基本上我们有一个 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 和事件）。

其中一个选项卡可能看起来像，这是我需要显示变量的地方：

file3.js

const FindFunEvent = (navigation) =>{
return(
<View>
    <Text>{navigation.getParam()}</Text>
</View>
)

}

问题

如何让 test 变量显示在 FindFunEvent 组件中？

这比任何事情都更难解释，如果你愿意的话，这里是一个视觉图。

Here is the link to a short video that goes over the issue

Answer 1

假设您想要导航并将在屏幕 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

Answer 2

一个简单的方法是使用 global.data。当您使用全局变量时，您可以在应用程序内的任何地方使用它。但这并不理想，因为在编程中使用 global 并不是最佳实践。我不完全确定您尝试的是否可行，如果不可能，您可以求助于使用 global.

Answer 3

你可以让它工作，将值作为组件的 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.io/UDHVnSUwK

在 React Native 屏幕之间传递数据（从屏幕 A 到屏幕 B 再到屏幕 C）

Passing data between React Native screens (From Screen A to Screen B to Screen C)

parameter-passing

reactjs

react-native

react-navigation