我试图在我的应用程序中的屏幕之间传递数据.目前我正在使用


"react-native": "0.46.0",
"react-navigation": "^1.0.0-beta.11"

我有我的索引.js


 import React, { Component } from 'react';
    import {
      AppRegistry,
    } from 'react-native';
    import App from './src/App'
    import { StackNavigator } from 'react-navigation';
    import SecondScreen from './src/SecondScreen'    

    class med extends Component {
      static navigationOptions = {
        title: 'Home Screen',
      };

      render(){
        const { navigation } = this.props;

        return (
          <App navigation={ navigation }/>
        );
      }
    }

    const SimpleApp = StackNavigator({
      Home: { screen: med },
      SecondScreen: { screen: SecondScreen, title: 'ss' },    
    });

    AppRegistry.registerComponent('med', () => SimpleApp);

应用程序身份

    import React, { Component } from 'react';
    import {
      StyleSheet,
      Text,
      Button,
      View
    } from 'react-native';
    import { StackNavigator } from 'react-navigation';

    const App = (props)  => {
      const { navigate } = props.navigation;

      return (
        <View>
          <Text>
            Welcome to React Native Navigation Sample!
          </Text>
          <Button
              onPress={() => navigate('SecondScreen', { user: 'Lucy' })}
              title="Go to Second Screen"
            />
        </View>
      );
    }

    export default App

然后在第二屏.js,我们将获取从上一个屏幕传递的数据,如下所示:


    import React, { Component } from 'react';
    import {
      StyleSheet,
      Text,
      View,
      Button
    } from 'react-native';

    import { StackNavigator } from 'react-navigation';


    const SecondScreen = (props)  => {
      const { state} = props.navigation;
      console.log("PROPS" + state.params);


      return (
        <View>
          <Text>
            HI
          </Text>

        </View>
      );
    }

    SecondScreen.navigationOptions = {
      title: 'Second Screen Title',
    };

    export default SecondScreen

Whenever I console.log I get undefined.
https://reactnavigation.org/docs/navigators/navigation-prop The docs say every screen should have these values what am I doing wrong?

推荐答案

在代码中,props.navigationthis.props.navigation.state是两个不同的东西.你应该在第二个屏幕上试试:

const {state} = props.navigation;
console.log("PROPS " + state.params.user);

这里的const {state}行只是为了得到一个易于阅读的代码.

React-native相关问答推荐

使用 Auth Token 标头react 本机图像,如何处理 401?

如何防止 VS Code 从react-native-web自动导入?

找不到变量:firebase/react native(expo)上的 IDBIndex

如何在 react-navigation v6 中更改标题高度

如何获取 iOS 版本?

开发 React Native Apps 时如何在 Android 模拟器窗口中重新加载?

react-native alignSelf 中心并拉伸到 maxWidth?

TabNavigator 中的 React Navigation 传递props

React Native 获取视图相对于屏幕的绝对位置

react-native 中 android 和 iOS 的图像大小

使用带有 react-native 的 WebView 设置用户代理

使用 react-native 单击时如何更改图像和文本 colored颜色 ?

redux-observable Promise 在单元测试中没有得到解决

如何在 React Native 中模拟align-items:baseline?

在 React Native (iOS) 中支持动态类型

React Native ScrollView 在 iOS 上从底部被截断

Firebase 3.3 实时数据库坚持使用 React Native 0.32 Making a connection attempt

如何更改键盘上的 return按钮?

Android Log

如何将图形 API 与 react-native-fbsdk 一起使用?