使用React-Native導航傳遞數據

我試圖在我的應用程序中的屏幕之間傳遞數據。目前我使用使用React-Native導航傳遞數據

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

我有我的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);

應用爲

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作爲

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

每當我CONSOLE.LOG我得到未定義。
https://reactnavigation.org/docs/navigators/navigation-prop 文檔說每個屏幕應該有這些值我做錯了什麼？

來源

2017-07-14 wdlax11

在你的代碼中，props.navigation和this.props.navigation.state是兩個不同的東西。你應該在你的第二個屏幕試試這個：

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

的const {state}線只有這裏得到一個易於閱讀的代碼。

來源

2017-07-14 21:11:30 Poptocrack

哦，我只是缺少PARAMS咄感謝 – wdlax11

你如何動態地做到這一點？所以我想將一個對象數組從一個屏幕傳遞到另一個屏幕，是我們可以做的事情嗎？或將所選對象的數據傳遞到下一個屏幕？非常感謝！！！ –

你應該看看https://reactnavigation.org/docs/intro/#Passing-params – Poptocrack

您可以在相關組件（SecondScreen）中訪問您的參數user和props.navigation.state.params.user。

來源

2017-07-16 09:24:51

這工作以及謝謝我只是缺少params。 – wdlax11

頭等艙

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

二等

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

來源

2017-12-17 19:25:50

使用React-Native導航傳遞數據

回答

相關問題