How to pass a link to a Navigator in renderScene?

Question

I was experimenting with React Native, and I had problems transferring the link to the navigator to the scene that I am viewing. Without a navigator, NewsList elements cannot initiate a scene change.

render: function() { return ( <Navigator initialRoute={ { name: 'NewsList', index: 0 } } renderScene={ ( route, navigator ) => NewsList } /> ); }, 

Similarly, in the rendering scene function, I need to pass the string rendering function to the navigator.

 <UIExplorerPage noSpacer={true} noScroll={true}> <ListView dataSource={this.state.dataSource} renderRow={this._renderRow} onEndReached={this.onEndReached} /> </UIExplorerPage> 

What is the idiomatic way of passing such links?

Answer 1

If I understand your question correctly, you say that for the news list navigation element you need a link to the navigator in order to trigger a navigation event. This (IMO) is the wrong approach.

Instead, pass a callback to the list items. A callback is a method in the parent news list component that already has a link to a navigator that you can call. Thus, you can avoid the navigator going all the way down the component hierarchy.

I can give a code example if this is not clear :)

Answer 2

As Colin mentioned, you need to pass a callback to your list items. Below is the code from the sample project (UIExplorer) in the native reaction itself.

Here we pass the navigator object to NavMenu, which is a component of the list.

 var TabBarExample = React.createClass({ // Other methods... blah blah renderScene: function(route, nav) { switch (route.id) { case 'navbar': return <NavigationBarSample navigator={nav} />; case 'breadcrumbs': return <BreadcrumbNavSample navigator={nav} />; case 'jumping': return <JumpingNavSample navigator={nav} />; default: return ( <NavMenu message={route.message} navigator={nav} onExampleExit={this.props.onExampleExit} /> ); } }, render: function() { return ( <Navigator style={styles.container} initialRoute={{ message: "First Scene", }} renderScene={this.renderScene} configureScene={(route) => { if (route.sceneConfig) { return route.sceneConfig; } return Navigator.SceneConfigs.FloatFromBottom; }} /> ); } }); 

In the NavMenu component, we pass the callback to the onPress each NavButton.

 class NavMenu extends React.Component { render() { return ( <ScrollView style={styles.scene}> <Text style={styles.messageText}>{this.props.message}</Text> <NavButton onPress={() => { this.props.navigator.push({ message: 'Swipe right to dismiss', sceneConfig: Navigator.SceneConfigs.FloatFromRight, }); }} text="Float in from right" /> <NavButton onPress={() => { this.props.navigator.push({ message: 'Swipe down to dismiss', sceneConfig: Navigator.SceneConfigs.FloatFromBottom, }); }} text="Float in from bottom" /> // Omitted rest of the NavButtons. </ScrollView> ); } 

Here is a link for example.

Answer 3

The question was vaguely worded. I solved the problem by adding a navigator to UIExplorerPage, for example <UIExplorerPage navigator={navigator} /> . Properties can be accessed in UIExplorerPage using this.props .