Question

var MainPage = React.createClass({
   onPress() {
    this.props.navigator.push({
        title: 'Home Page',
        component: Homepage
    });
},

render() {
    return (
        <View style={[styles.scene, {backgroundColor: '#DAF6FF'}]}>
            <TouchableHighlight
              style={styles.menubutton}
              onPress={this.onPress}>
                <Text style={styles.white}>This page</Text>
            </TouchableHighlight>
            <TouchableHighlight
              style={styles.menubutton}
              onPress={this.onPress}>
                <Text style={styles.white}>That page</Text>
            </TouchableHighlight>
            <TouchableHighlight
              style={styles.menubutton}
              onPress={this.onPress}>
                <Text style={styles.white}>Another page</Text>
            </TouchableHighlight>
        </View>
    );
  }
});

如何使用this.onPress发送变量以动态设置导航器标题？即如果我按下“此页面”，它会在onPress功能中将标题设置为“此页面”。此外，动态设置组件也很有用。

除了为每个菜单项创建单独的功能之外，似乎没有任何明显的方法来实现这一点。我尝试了各种各样的东西并且搜索无济于事。

Answer 1

您可以将标题作为参数传递给函数：

<TouchableHighlight
 style={styles.menubutton}
 onPress={ () => this.onPress('Another page') }>
     <Text style={styles.white}>Another page</Text>
</TouchableHighlight>

然后，在导航器功能中指定它：

onPress(title) {
  this.props.navigator.push({
    title: title,
    component: Homepage
  });
}

如果您想动态设置组件，可以更进一步并使用switch语句：

onPress(title) {
  switch(title) {
    case 'Another page':
      var component = AnotherPage;
      break;
  }

  this.props.navigator.push({
    title: title,
    component: component
  });
}

React Native Navigator动态设置标题iOS

1 个答案: