![](/img/trans.png)
[英]How to pass props to FlatList with renderScene in react-native-tab-view?
[英]How do I pass reference to Navigator into renderScene?
我一直在尝试使用React Native,我无法将对导航器的引用传递到我正在渲染的场景中。 没有导航器,NewsList项目不能触发场景更改。
render: function() {
return (
<Navigator
initialRoute={ { name: 'NewsList', index: 0 } }
renderScene={ ( route, navigator ) => NewsList }
/>
);
},
类似地,在渲染场景功能中,我需要将导航器传递给行渲染功能。
<UIExplorerPage noSpacer={true} noScroll={true}>
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow}
onEndReached={this.onEndReached}
/>
</UIExplorerPage>
传递这样的引用的惯用方法是什么?
像Colin提到的那样,你需要将回调传递给你的列表项。 下面给出的是来自示例项目(UIExplorer)的代码本身反应本身。
在这里,我们将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;
}}
/>
);
}
});
在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>
);
}
这是示例的链接 。
如果我正确理解您的问题,您说新闻列表项目组件需要引用导航器才能触发导航事件。 这(IMO)是错误的方法。
相反,传递列表项回调。 回调是父新闻列表组件上的一个方法,它已经引用了您可以调用的导航器。 通过这种方式,您可以避免将导航器一直传递到组件层次结构中。
如果不清楚,我可以给出一个代码示例:)
问题措辞有点模糊。 我通过向UIExplorerPage添加导航器解决了我的问题,例如<UIExplorerPage navigator={navigator} />
。 可以使用this.props
在UIExplorerPage中访问属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.