react-nativeのtutorialは、すべてのレンダリングロジックを使用して、アプリケーションの後に名前が付けられたrender()メソッドを持つReact "クラス"を作成して、単一ページのアプリケーションをレンダリングする方法を示しています。react-nativeで複数ページのアプリケーションを作成するにはどうすればよいですか？
これは基本的にページをレンダリングします。かなり異なるページがいくつかあるとどうなりますか？この "app"を作成し、ユーザーがどのページにいるかによってレンダリングメソッドにswitch文を効果的に持たせるか、またはページ間を切り替えるためのより良い/組み込みの方法がありますか？
Navigatorはこれを解決するために使用するコンポーネントです。
1 renderメソッドであなたの最初のルートと一般的なプロパティを定義します。
class MyApp extends React.Component {
render() {
return (
<Navigator
initialRoute={{id: 'SplashPage', name: 'Index'}}
renderScene={this.renderScene.bind(this)}
configureScene={(route) => {
if (route.sceneConfig) {
return route.sceneConfig;
}
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}/>
);
}
}
2.それから、あなたはあなたがに行きたい、他のサイト/ビュー/ページを定義する必要がありますrenderScene方法：
renderScene (route, navigator) {
var routeId = route.id;
if (routeId === 'SplashPage') {
return (
<SplashPage
navigator={navigator}/>
);
}
if (routeId === 'LoginPage') {
return (
<LoginPage
navigator={navigator}/>
);
}
}
}
3.スプラッシュクラスであなたが見たらすぐ、この例のように、次のページへのルート2秒FOLで終わりましたかlowingコード：（私はそこreplaceWithようなものになるとちょうど置き換えませんが、決して気にしないならば、それは良いだろうと思う：P）
class SplashPage extends Component {
componentWillMount() {
var navigator = this.props.navigator;
setTimeout (() => {
navigator.replace({
id: 'LoginPage',
});
}, 2000);
}
render() {
return (
<View style={{flex: 1, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center'}}>
<Image style={{position: 'absolute', left: 0, top: 0, width: windowSize.width, height: windowSize.height}} source={require('image!splash_screen')}></Image>
</View>
);
}
}
module.exports = SplashPage;
私は@Mrブラウンの答えは少し混乱することがわかったので、私は基本的
var PageOne = React.createClass({
_handlePress() {
this.props.navigator.push({id: 2,});
},
render() {
return (
<View style={[styles.container, {backgroundColor: 'green'}]}>
</View>
)
},
});
var PageTwo = React.createClass({
_handlePress() {
this.props.navigator.pop();
},
render() {
return (
<View style={[styles.container, {backgroundColor: 'purple'}]}>
</View>
)
},
});
var SampleApp = React.createClass({
_renderScene(route, navigator) {
if (route.id === 1) {
return <PageOne navigator={navigator} />
} else if (route.id === 2) {
return <PageTwo navigator={navigator} />
}
},
render() {
return (
<Navigator
initialRoute={{id: 1, }}
renderScene={this._renderScene} />
);
}
});コードはかなり自己説明する必要があります：ので、ここでAndroidとiOSに対応してNavigatorを使用して、基本的な例です - コードでそれを書き直しました。あなたが何かを理解していなければ私に知らせてください。
styles.containerオブジェクトはどうなっていますか？スタイルはどこかで定義されているはずですか？私はそれを実行するとエラーが発生します。 – jcollum
@jcollum yep - ここに示すように 'var styles = ...'を定義する必要があります：https://facebook.github.io/react-native/docs/stylesheet.html –
official documentによれば、react navigationのほかに、native navigationおよびreact native navigationは、クロスプラットフォームのマルチページソリューションを提供します。 NavigatorIOSはiOS専用コンポーネントです。
React Native Routerから関連プロジェクトを見つけることができます。
詳細な例をありがとうございます！ – GreenAsJade
問題ない仲間、それがうまくいけばいい！ – BigPun86
保存しました！ありがとう！ –