前言
最近在學(xué)習(xí)react-native，在學(xué)習(xí)導(dǎo)航器部分感覺到比較多困難，剛好看到https://reactnavigation.org/ ，封裝過的一些導(dǎo)航器比較好使用，所以就對(duì)教程進(jìn)行一些翻譯學(xué)習(xí)，會(huì)持續(xù)進(jìn)行更新，基礎(chǔ)部分翻譯完成后會(huì)將學(xué)習(xí)的一些demo進(jìn)行分享,有什么不足希望大家指出畢竟菜hhhh。
ps：有一些代碼演示效果只能在官網(wǎng)中看到~
Getting Started
hello Mobile Navigation
Nesting Navigators
Configuring Headers
...
手機(jī)導(dǎo)航器，你好
讓我們一起使用react的導(dǎo)航組件在安卓和IOS上建立一個(gè)簡(jiǎn)單的聊天應(yīng)用。
安裝
首先確認(rèn)你已經(jīng)安裝以及可以使用React-native。然后創(chuàng)建一個(gè)新的項(xiàng)目和添加react-navigation依賴:
# Create a new React Native App
react-native init SimpleApp
cd SimpleApp
# Install the latest version of react-navigation from npm
npm install --save react-navigation
# Run the new app
react-native run-android # or:
react-native run-ios
確定你已經(jīng)成功的看到一個(gè)空的初始項(xiàng)目可以運(yùn)行在IOS或者安卓上。
bare-project
我們想在IOS和安卓上分享同一份代碼，所以我們刪除index.ios.js 和 index.android.js原來(lái)里面的代碼，然后使用import './App';。
現(xiàn)在讓我們創(chuàng)立一個(gè)新的文件并命名為App.js，通過使用它來(lái)啟動(dòng)我們的項(xiàng)目.
Stack Navigator 介紹
我們想用StackNavigator在我們的app上，因?yàn)槲覀兿朐诟拍钌贤ㄟ^棧的形式去使用導(dǎo)航，通過棧的形式，每個(gè)一新的場(chǎng)景(頁(yè)面)將放在棧頂，在后退的時(shí)候我們將移除棧頂?shù)膱?chǎng)景(頁(yè)面)。
讓我們用一個(gè)場(chǎng)景(頁(yè)面)去開始吧：
import React from 'react';
import {
AppRegistry,
Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return <Text>Hello, Navigation!</Text>;
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
});
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
場(chǎng)景(頁(yè)面)的標(biāo)題的設(shè)置是在靜態(tài)屬性 static navigationOptions上
通過該屬性的選項(xiàng)可以設(shè)置導(dǎo)航器上的場(chǎng)景(頁(yè)面)
現(xiàn)在一個(gè)相同的頁(yè)面應(yīng)該會(huì)出現(xiàn)在iphone和安卓應(yīng)用上
first-screen
增加一個(gè)新的場(chǎng)景/頁(yè)面
在 HomeScreen創(chuàng)建一個(gè)按鈕去連接我們的第二個(gè)頁(yè)面:
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hello, Chat App!</Text>
<Button
onPress={() => navigate('Chat', { user: 'Lucy' })}
title="Chat with Lucy"
/>
</View>
);
}
}
我們使用screen navigation prop中的navigate函數(shù)。在定義一個(gè)目的路由routeName，同時(shí)我們還可以傳遞參數(shù)到新的路由中
現(xiàn)在讓我們創(chuàng)建一個(gè)聊天場(chǎng)景/頁(yè)面去顯示name這個(gè)路由中傳遞過來(lái)的參數(shù)。
class ChatScreen extends React.Component {
static navigationOptions = {
// Nav options can be defined as a function of the navigation prop:
title: ({ state }) => `Chat with ${state.params.user}`,
};
render() {
// The screen's current route is passed in to `props.navigation.state`:
const { params } = this.props.navigation.state;
return (
<View>
<Text>Chat with {params.user}</Text>
</View>
);
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
Chat: { screen: ChatScreen },
});
現(xiàn)在你可以通過導(dǎo)航器跳轉(zhuǎn)到新的場(chǎng)景/頁(yè)面，以及返回
first-navigation
