【发布时间】:2016-12-18 13:13:27
【问题描述】:
我正在尝试使用 react-native 进行导航。我正在用 2 个页面(HomePage 和 OtherPage)对其进行测试,并希望 HomePage 在我提交一些文本时能够导航到 OtherPage。
我的基本导航器 index.android.js 文件...
class MyApp extends Component {
_renderScene = function(route, nav) {
switch (route.index) {
case 'HomePage':
console.log('homepage nav')
return <HomePage navigator={nav} />
case 'OtherPage':
console.log('otherpagenav')
return <OtherPage navigator={nav} />
}
}
render() {
return (
<Navigator
initialRoute={{ title: 'My Initial Scene', index: 'HomePage' }}
renderScene={ (route, nav) => { return this._renderScene(route, nav) } }
/>
)
}
}
如果我通过索引和初始路由手动设置主页和其他页面,它们都可以工作。
initialRoute={{ title: 'My Initial Scene', index: 'HomePage' }}
或
initialRoute={{ title: 'My Initial Scene', index: 'OtherPage' }}
我的 HomePage.js 文件加载正常,看起来像...
class HomePage extends Component {
constructor(props) {
super(props);
}
_onSubmit() {
console.log( 'submit2', this);
this.props.navigator.push({
title: "Other Page",
index: 'OtherPage',
component: OtherPage,
passProps: { testprop: 'someuser'},
});
}
render() {
return (
<View>
<Text>Current Scene: {this.props.title}</Text>
<TextInput
onChangeText = {( keywords ) => this.setState({ keywords })}
defaultValue = 'Type a keyword'
onSubmitEditing = { this._onSubmit.bind( this ) }
/>
</View>
)
}
}
我的测试其他页面只是
class OtherPage extends Component {
constructor( props ) {
super( props );
}
componentDidMount() {
console.log( 'otherpage component mounted');
}
render() {
return (
<View><Text>Other Page</Text>
</View>
);
}
}
当我输入一些文本并提交时。我从 _onSubmit() 看到提交 console.log 所以我知道导航器被调用了。
我还看到“安装了其他页面组件”。
所以从日志上看一切正常,但我没有看到更新的场景/页面,我看到的只是更新的 console.logs。
我需要做些什么来强制它更新场景,还是不应该通过导航器推送自动发生? (我也有点不确定是否需要导航器组件,正如我在一些示例中看到的那样,但在任何地方都没有真正引用)。
【问题讨论】:
标签: android react-native