リアクションネイティブナビゲーションを使用してデータを渡す

Question

私のアプリの画面間でデータをやり取りしようとしています。現在、私は私が私のindex.ios

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

アプリ私は私が手にconsole.logたび、その後

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

import { StackNavigator } from 'react-navigation'; 


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


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

    </View> 
); 
} 

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

export default SecondScreen 

としてsecondscreen

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 

として持って

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

を使用しています未定義。
https://reactnavigation.org/docs/navigators/navigation-prop ドキュメントには、すべての画面にこれらの値を設定する必要があります。私は間違って何をしていますか？

Answer 1

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

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

const {state}ラインがコードを読みやすい取得するにはここだけです。

Answer 2

userのパラメータにアクセスできます。関連するコンポーネント（SecondScreen）にprops.navigation.state.params.userがあります。あなたが動的にこれを行うのですか

Answer 3

ファーストクラス

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

第二のクラス

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