web-dev-qa-db-ja.com

React-Native Navigationを使用したデータの受け渡し

アプリの画面間でデータをやり取りしようとしています。現在使用しています

"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

Console.logを実行すると、未定義になります。
https://reactnavigation.org/docs/navigators/navigation-prop ドキュメントには、すべての画面にこれらの値が必要であると書かれています。

javascriptandroidiosreactjsreact-native
11
wdlax11

コードでは、props.navigationとthis.props.navigation.stateは2つの異なるものです。 2番目の画面でこれを試してください：

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

const {state}行は、コードを読みやすくするためだけにあります。

13
Poptocrack

ファーストクラス

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

セカンドクラス

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

反応ナビゲーション3. *

親クラス

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

子クラス

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

関連コンポーネント（SecondScreen）のprops.navigation.state.params.userを使用して、userであるパラメーターにアクセスできます。

4
taha_emin

1つのコンポーネントから他のコンポーネントにデータを送信するためのNPMパッケージを開発しました。簡単に確認して使用してください。

Reactデータナビゲーション

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.

何か助けがあればコメントします。

1
Virendra Yadav

反応ナビゲーション3.x docs から、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>
          );
        }
    }
1
Storage Lenovo