使用 React-Native 导航传递数据

Question

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

---

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

我有我的 index.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

然后在 secondscreen.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

每当我使用 console.log 时，我都会变得不确定。

https://reactnavigation.org/docs/navigators/navigation-prop 文档说每个屏幕都应该有这些值我做错了什么？

原文由 wdlax11 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在您的代码中， props.navigation 和 this.props.navigation.state 是两个不同的东西。你应该在你的第二个屏幕上试试这个：

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

const {state} 行只是为了获得易于阅读的代码。

原文由 Poptocrack 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

现在所有其他答案似乎都已过时。在当前的 React 导航版本中，( "@react-navigation/native": "^5.0.8", )，您首先像这样在一个屏幕与另一个屏幕之间传递值：

        function HomeScreen({ navigation }) {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Home Screen</Text>
          <Button
            title="Go to Details"
            onPress={() => {
              /* 1. Navigate to the Details route with params, passing the params as an object in the method navigate */
              navigation.navigate('Details', {
                itemId: 86,
                otherParam: 'anything you want here',
              });
            }}
          />
        </View>
      );
    }

然后在您要重定向的组件中，您会像这样获得传递的数据：

 function DetailsScreen({ route, navigation }) {
  /* 2. Get the param */
  const { itemId } = route.params;
  const { otherParam } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
    </View>
  );
}

所以，基本上，现在的数据在 this.props.route.params 里面。在上面的例子中，我展示了如何从功能组件中获取它们，但在类组件中是类似的，我做了这样的事情：

首先，我从这个 ProfileButton 传递数据，在它的 handleNavigate 函数中，如下所示：

// these ProfileButton and ProfileButtonText, are a Button and a Text, respectively,
// they were just styled with styled-components
<ProfileButton
 onPress={() => this.handleNavigate(item)
  <ProfileButtonText>
      check profile
  </ProfileButtonText>
</ProfileButton>

其中 handleNavigate 是这样的：

    handleNavigate = user => {
        // the same way that the data is passed in props.route,
        // the navigation and it's method to navigate is passed in the props.
        const {navigation} = this.props;
        navigation.navigate('User', {user});
    };

然后，函数 HandleNavigate 重定向到用户页面，这是一个类组件，我得到的数据是这样的：

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

export default class User extends Component {
    state = {
        title: this.props.route.params.user.name,
    };

    render() {
        const {title} = this.state;
        return (
            <View>
                <Text>{title}</Text>
            </View>
        );
    }
}

在类组件中，我发现的方法是制作这条很长的线 title: this.props.route.params.user.name, 但它有效。如果有人知道如何在当前版本的react-native navigation中缩短它，请赐教。我希望这能解决你的问题。

原文由 Pedro Henrique Bufulin 发布，翻译遵循 CC BY-SA 4.0 许可协议