react-native导航器不更新场景

时间:2016-12-18 13:13:27

标签: android react-native

我正在尝试使用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) } }
      />
    )
  }
}

如果我通过index和initialRoute手动设置它们,则HomePage和OtherPage都会工作。

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所以我知道导航器被称为ok。

我也看到'其他页面组件已安装'。

所以一切看起来都不错,但是我没有看到更新的场景/页面,我看到的只是更新的console.logs。

我是否需要做些什么来强制它更新场景,或者不应该通过导航器推送自动发生? (我也不太确定是否需要导航器组件,正如我在某些示例中看到的那样,但在任何地方都没有真正引用过。)

1 个答案:

答案 0 :(得分:0)

看起来avd有点奇怪。我最终将react-native升级到0.39.2(我认为没有区别,但包括完整性)。然后我删除了avd,创建了一个mew one(目标名称Android 6.0 Platform 6.0 API 23 Intel Atom x86_64)选中删除所有用户数据,然后它似乎工作。

希望我明白为什么,所以如果有人有更好的答案,我会很乐意接受。