前言
最近在學(xué)習(xí)react-native谷徙，在學(xué)習(xí)導(dǎo)航器部分感覺到比較多困難撼班，剛好看到https://reactnavigation.org/ 灵汪，封裝過的一些導(dǎo)航器比較好使用蔗候，所以就對教程進(jìn)行一些翻譯學(xué)習(xí)怒允，會持續(xù)進(jìn)行更新，基礎(chǔ)部分翻譯完成后會將學(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上建立一個簡單的聊天應(yīng)用。
安裝
首先確認(rèn)你已經(jīng)安裝以及可以使用React-native所灸。然后創(chuà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)成功的看到一個空的初始項目可以運行在IOS或者安卓上丽惶。
bare-project
我們想在IOS和安卓上分享同一份代碼，所以我們刪除index.ios.js 和 index.android.js原來里面的代碼爬立，然后使用import './App';钾唬。
現(xiàn)在讓我們創(chuàng)立一個新的文件并命名為App.js，通過使用它來啟動我們的項目.
Stack Navigator 介紹
我們想用StackNavigator在我們的app上，因為我們想在概念上通過棧的形式去使用導(dǎo)航抡秆，通過棧的形式奕巍，每個一新的場景(頁面)將放在棧頂，在后退的時候我們將移除棧頂?shù)膱鼍?頁面)儒士。
讓我們用一個場景(頁面)去開始吧：
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);
場景(頁面)的標(biāo)題的設(shè)置是在靜態(tài)屬性 static navigationOptions上
通過該屬性的選項可以設(shè)置導(dǎo)航器上的場景(頁面)
現(xiàn)在一個相同的頁面應(yīng)該會出現(xiàn)在iphone和安卓應(yīng)用上
first-screen
增加一個新的場景/頁面
在 HomeScreen創(chuàng)建一個按鈕去連接我們的第二個頁面:
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ù)的止。在定義一個目的路由routeName，同時我們還可以傳遞參數(shù)到新的路由中
現(xiàn)在讓我們創(chuàng)建一個聊天場景/頁面去顯示name這個路由中傳遞過來的參數(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)到新的場景/頁面诅福，以及返回
first-navigation
