【React Native】文件翻譯閱讀紀錄 - 指南 - 換畫面導覽
 |
| Facebook Open Source React Native |
換畫面導覽
移動應用很少由單個屏幕組成。管理多個屏幕的呈現和轉換通常由所謂的導航器來處理。
本指南介紹了React Native中提供的各種導航組件。如果您剛開始使用導航，則可能需要使用React Navigation。 React Navigation提供易於使用的導航解決方案，能夠在iOS和Android上呈現常見的堆棧導航和選項卡式導航模式。由於這是一個JavaScript實現，因此在與諸如redux之類的狀態管理庫集成時，它提供了最大量的可配置性和靈活性。
如果您只針對iOS，您可能還需要檢查NavigatorIOS，以便以最少的配置提供本機外觀，因為它提供了本機UINavigationController類的包裝。但是，此組件不適用於Android。
如果您希望在iOS和Android上實現原生外觀，或者您將React Native集成到已經本地管理導航的應用程序中，則以下庫在兩個平台上提供本機導航：本機導航，反應 - 本機導航。
本指南介紹了React Native中提供的各種導航組件。如果您剛開始使用導航，則可能需要使用React Navigation。 React Navigation提供易於使用的導航解決方案，能夠在iOS和Android上呈現常見的堆棧導航和選項卡式導航模式。由於這是一個JavaScript實現，因此在與諸如redux之類的狀態管理庫集成時，它提供了最大量的可配置性和靈活性。
如果您只針對iOS，您可能還需要檢查NavigatorIOS，以便以最少的配置提供本機外觀，因為它提供了本機UINavigationController類的包裝。但是，此組件不適用於Android。
如果您希望在iOS和Android上實現原生外觀，或者您將React Native集成到已經本地管理導航的應用程序中，則以下庫在兩個平台上提供本機導航：本機導航，反應 - 本機導航。
React Navigation
社區導航解決方案是一個獨立的庫，允許開發人員只需幾行代碼即可設置應用程序的屏幕。
第一步是在您的項目中安裝：
第一步是在您的項目中安裝：
npm install --save react-navigation
然後，您可以使用主屏幕和個人資料屏幕快速創建應用：
import {
createStackNavigator,
} from 'react-navigation';
const App = createStackNavigator({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen },
});
export default App;
每個屏幕組件都可以設置導航選項，例如標題標題。它可以使用導航道具上的動作創建器鏈接到其他屏幕：
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title="Go to Jane's profile"
onPress={() =>
navigate('Profile', { name: 'Jane' })
}
/>
);
}
}
React Navigation路由器可以輕鬆覆蓋導航邏輯或將其集成到redux中。由於路由器可以彼此嵌套，因此開發人員可以覆蓋應用程序的一個區域的導航邏輯，而無需進行大範圍的更改。
React Navigation中的視圖使用本機組件和Animated庫來提供在本機線程上運行的60fps動畫。此外，動畫和手勢可以輕鬆定制。
有關React Navigation的完整介紹，請按照“React Navigation入門指南”進行操作，或瀏覽其他文檔，例如“導航器簡介”。
React Navigation中的視圖使用本機組件和Animated庫來提供在本機線程上運行的60fps動畫。此外，動畫和手勢可以輕鬆定制。
有關React Navigation的完整介紹，請按照“React Navigation入門指南”進行操作，或瀏覽其他文檔，例如“導航器簡介”。
NavigatorIOS
NavigatorIOS的外觀和感覺就像UINavigationController一樣，因為它實際上是建立在它之上的。
<NavigatorIOS
initialRoute={{
component: MyScene,
title: 'My Initial Scene',
passProps: {myProp: 'foo'},
}}
/>
與其他導航系統一樣，NavigatorIOS使用路線來表示屏幕，但有一些重要的區別。可以使用路徑中的組件鍵指定要呈現的實際組件，並且可以在passProps中指定應傳遞給此組件的任何道具。 “導航器”對象自動作為道具傳遞給組件，允許您根據需要調用推送和彈出。
由於NavigatorIOS利用本機UIKit導航，它將自動呈現帶有後退按鈕和標題的導航欄。
由於NavigatorIOS利用本機UIKit導航，它將自動呈現帶有後退按鈕和標題的導航欄。
import React from 'react';
import PropTypes from 'prop-types';
import {Button, NavigatorIOS, Text, View} from 'react-native';
export default class NavigatorIOSApp extends React.Component {
render() {
return (
<NavigatorIOS
initialRoute={{
component: MyScene,
title: 'My Initial Scene',
passProps: {index: 1},
}}
style={{flex: 1}}
/>
);
}
}
class MyScene extends React.Component {
static propTypes = {
route: PropTypes.shape({
title: PropTypes.string.isRequired,
}),
navigator: PropTypes.object.isRequired,
};
constructor(props, context) {
super(props, context);
this._onForward = this._onForward.bind(this);
}
_onForward() {
let nextIndex = ++this.props.index;
this.props.navigator.push({
component: MyScene,
title: 'Scene ' + nextIndex,
passProps: {index: nextIndex},
});
}
render() {
return (
<View>
<Text>Current Scene: {this.props.title}</Text>
<Button
onPress={this._onForward}
title="Tap me to load the next scene"
/>
</View>
);
}
}
查看 NavigatorIOS 參考文檔以了解有關此組件的更多信息。
0 意見