1.react-native init ReactNavigation?
2.yarn add react-navigation
3.react-native run-android?
這樣如下圖就說明運(yùn)行成功了挫掏，當(dāng)然這里你如果有使用模擬器或者真機(jī)并開啟調(diào)試模式炒俱，則會自動安裝并運(yùn)行App
4.新建App.js文件往踢，并在index.android.js中引入
5.App.js中引入navigation 香椎，并使用
import {
StackNavigator,
} from 'react-navigation';
const App = StackNavigator({
? ? ReactNavigation:{screen:ReactNavigation},
? ? Main: {screen: MainScreen},
? ? Profile: {screen: ProfileScreen},
});
6.我們新建兩個(gè)界面涛碑，分別是MainScreen和ProfileScreen
如何實(shí)現(xiàn)跳轉(zhuǎn)朴爬？
非常簡單
const { navigate } = this.props.navigation;
navigate('Main');
如何傳參丰歌？
const { navigate } = this.props.navigation;
navigate('Main',{userName:'linjian',age:28});
如何接受參數(shù)荒澡？
const { params } = this.props.navigation.state;
let userName = params.userName;
let age? = params.age;
跳到MainScreen如何回傳參數(shù)到ReactNavigation?
setUserName(userName){
? ? ? this.setState({userName:userName})
}
goToNext(){
? ? ? const { navigate } = this.props.navigation;
? ? ? navigate('Main',{userName:this.state.userName,age:28,setUserName:this.setUserName.bind(this)});
}
MainScreen 里面
static navigationOptions = ({ navigation }) => ({? ? title:{`Chat with ${navigation.state.params.userName}`},? ? headerRight:{navigation.state.params.setUserName('huanglimei')}} />,
});
英文文檔：請點(diǎn)擊這里
