[英]How do I pass reference to Navigator into renderScene?
I've been experimenting with React Native and I'm having trouble passing a reference to navigator into the scene I'm rendering. 我一直在尝试使用React Native,我无法将对导航器的引用传递到我正在渲染的场景中。 Without navigator, NewsList items can't trigger a scene change.
没有导航器,NewsList项目不能触发场景更改。
render: function() {
return (
<Navigator
initialRoute={ { name: 'NewsList', index: 0 } }
renderScene={ ( route, navigator ) => NewsList }
/>
);
},
Similarly, in the render scene function I need to pass navigator to the row rendering function. 类似地,在渲染场景功能中,我需要将导航器传递给行渲染功能。
<UIExplorerPage noSpacer={true} noScroll={true}>
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow}
onEndReached={this.onEndReached}
/>
</UIExplorerPage>
What is the idiomatic way to pass references like this around? 传递这样的引用的惯用方法是什么?
Like Colin mentioned, you need to pass a callback to your list items. 像Colin提到的那样,你需要将回调传递给你的列表项。 Given below is code from the an example project (UIExplorer) in react native itself.
下面给出的是来自示例项目(UIExplorer)的代码本身反应本身。
Here, we're passing the navigator
object to the NavMenu which is the list component. 在这里,我们将
navigator
对象传递给NavMenu,它是列表组件。
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're passing a callback on the onPress
of every NavButton. 在NavMenu组件中,我们在每个NavButton的
onPress
上传递回调。
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>
);
}
If I understand your question correctly, you're saying that your news list item components need a reference to navigator in order to trigger a navigation event. 如果我正确理解您的问题,您说新闻列表项目组件需要引用导航器才能触发导航事件。 This (IMO) is the wrong approach.
这(IMO)是错误的方法。
Instead, pass the list items a callback. 相反,传递列表项回调。 The callback is a method on the parent news list component, and that already has a reference to navigator that you can call.
回调是父新闻列表组件上的一个方法,它已经引用了您可以调用的导航器。 In this way you can avoid passing the navigator all the way down your component hierarchy.
通过这种方式,您可以避免将导航器一直传递到组件层次结构中。
I can give a code example if this isn't clear :) 如果不清楚,我可以给出一个代码示例:)
The question was worded kinda vaguely. 问题措辞有点模糊。 I resolved my issue by adding navigator to UIExplorerPage, eg
<UIExplorerPage navigator={navigator} />
. 我通过向UIExplorerPage添加导航器解决了我的问题,例如
<UIExplorerPage navigator={navigator} />
。 Properties can be accessed within UIExplorerPage using this.props
. 可以使用
this.props
在UIExplorerPage中访问属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.