Передача данных с использованием интерактивной навигации

Я пытаюсь передать данные между экранами в моем приложении. В настоящее время я использую

"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);

app as

    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

Всякий раз, когда я консоль .log, я получаю неопределенный.
https://reactnavigation.org/docs/navigators/navigation-prop Документы говорят, что каждый экран должен иметь эти значения, что я делаю не так?

Ответ 1

В вашем коде, props.navigation и this.props.navigation.state две разные вещи. Вы должны попробовать это на своем втором экране:

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

строка const {state} доступна только для получения легко читаемого кода.

Ответ 2

Первый класс

<Button onPress = {
  () => navigate("ScreenName", {name:'Jane'})
} />

Второй класс

const {params} = this.props.navigation.state

Ответ 3

реактивная навигация 3. *

Родительский класс

this.props.navigation.navigate('Child', {
    something: 'Some Value',
});

Детский класс

this.props.navigation.state.params.something // outputs "Some Value"

Ответ 4

Вы можете получить доступ к вашему параметру user, с props.navigation.state.params.user в соответствующем компоненте (SecondScreen).

Ответ 5

От реагировать navigaton 3.x документы, вы можете использовать getParam(params).

    class SecondScreen extends React.Component {
        render() {
          const { navigation } = this.props;
          const fname = navigation.getParam('user');
          return (
            <View>
              <Text>user: {JSON.stringify(fname)}</Text>
            </View>
          );
        }
    }

Ответ 6

Я разработал пакет NPM для отправки данных из одного компонента в другие компоненты. Пожалуйста, проверьте и используйте его легко использовать.

Реагировать на данные навигации

import { DataNavigation } from 'react-data-navigation';
.
.
.
// For set the data you need to call setData(key, value) Function i.e.
// eg. DataNavigation.setData('name', 'Viren'); 
// it will set the 'Viren' as respect to 'name' key.

import { DataNavigation } from 'react-data-navigation';
.
.
.
// Here we want to get the name value, which you set in home component than
// console.log('Hey my name is' + DataNavigation.getData('name'));
// it will print in console : Hey my name is Viren.

Комментарий вниз за любую помощь.