I’m exploring possibilities of React Native while developing a demo app with custom navigation between views with the help of Navigator
component.
The main app class renders navigator and inside renderScene
returns passed component:
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 }); } }} /> ); }}
For now app contains two views:
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> ); }}
What I want to figure out is:
I see in the logs that when pressing “go to feed”
renderScene
is called several times though the view renders correctly once. Is it how the animation works?index.ios.js:57 Object {name: 'WelcomeView', component: function}index.ios.js:57 Object {name: 'FeedView', component: function}// renders Feed View
Generally does my approach conform to the React way, or can it be done better?
What I want to achieve is something similar to NavigatorIOS
but without the navigation bar (however some views will have their own custom navigation bar).