Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

Custom navigation with Navigator component in React-Native

$
0
0

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).


Viewing all articles
Browse latest Browse all 16750

Trending Articles