web-dev-qa-db-fra.com

Transmission de données à l'aide de la navigation native React

J'essaie de transmettre des données entre les écrans de mon application. Actuellement j'utilise

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

J'ai mon 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

puis dans le second screen.js où nous allons récupérer les données qui sont passées de l'écran précédent comme

    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

Chaque fois que je console.log, je suis indéfini.
https://reactnavigation.org/docs/navigators/navigation-prop Les docs disent que chaque écran devrait avoir ces valeurs qu'est-ce que je fais mal?

javascriptandroidiosreactjsreact-native
11
wdlax11

Dans votre code, props.navigation et this.props.navigation.state sont deux choses différentes. Vous devriez essayer ceci dans votre deuxième écran:

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

le const {state} la ligne n'est là que pour obtenir un code facile à lire.

13
Poptocrack

Première classe

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

deuxième classe

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

react-navigation 3. *

Classe parent

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

Classe enfant

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

Vous pouvez accéder à votre paramètre qui est user, avec props.navigation.state.params.user dans le composant associé (SecondScreen).

4
taha_emin

J'ai développé un package NPM pour envoyer des données d'un composant à d'autres composants. Veuillez vérifier et utiliser son utilisation facile.

React navigation de données

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.

Commentez pour toute aide.

1
Virendra Yadav

Depuis react navigation 3.x docs , vous pouvez utiliser 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