Tôi đang khám phá các khả năng của React Native trong khi phát triển ứng dụng demo với điều hướng tùy chỉnh giữa các chế độ xem với sự trợ giúp của Navigatorthành phần .
Lớp ứng dụng chính biểu hiện điều hướng và bên trong renderScenetrả về thành phần được thông qua:
class App extends React.Component {
render() {
return (
<Navigator
initialRoute={{name: 'WelcomeView', component: WelcomeView}}
configureScene={() => {
return Navigator.SceneConfigs.FloatFromRight;
}}
renderScene={(route, navigator) => {
// count the number of func calls
console.log(route, navigator);
if (route.component) {
return React.createElement(route.component, { navigator });
}
}}
/>
);
}
}
Hiện tại ứng dụng chứa hai chế độ xem:
class FeedView extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>
Feed View!
</Text>
</View>
);
}
}
class WelcomeView extends React.Component {
onPressFeed() {
this.props.navigator.push({
name: 'FeedView',
component: FeedView
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome View!
</Text>
<Text onPress={this.onPressFeed.bind(this)}>
Go to feed!
</Text>
</View>
);
}
}
Những gì tôi muốn tìm ra là:
Tôi thấy trong các bản ghi rằng khi nhấn vào thì hãy chuyển sang feed feed
renderSceneđược gọi nhiều lần mặc dù khung nhìn hiển thị chính xác một lần. Có phải đó là cách hoạt hình?index.ios.js:57 Object {name: 'WelcomeView', component: function} index.ios.js:57 Object {name: 'FeedView', component: function} // renders Feed ViewNói chung cách tiếp cận của tôi phù hợp với cách React, hoặc nó có thể được thực hiện tốt hơn?
Những gì tôi muốn đạt được là một cái gì đó tương tự NavigatorIOSnhưng không có thanh điều hướng (tuy nhiên một số chế độ xem sẽ có thanh điều hướng tùy chỉnh riêng).