react-native-router-flux。如何以编程方式更改自定义navBar？

Question

我有我的场景自定义导航栏：

<Scene key="myPage" 
    component={MyPage} 
    navBar={NavBarCustom} 
    hideNavBar={false}/> 

....

class NavBarCustom extends Component { 

    constructor(props) { 
     super(props); 
    } 

    onExitPressed(){ 
    App.exit(); 
    } 

    render() { 
    return (
     <View style={styles.navBar}> 

     <View style={styles.leftContainer}> 
      <Image 
      style={styles.logo} 
      source={require('./../../res/ic_nav_bar.png')}/> 
      <Text style={[appStyles.customFontBold, styles.title1]}> 
      MY TITLE 
      </Text> 
     </View> 

     <View style={styles.centralContainer}> 
      <Text style={[appStyles.customFontRegular, styles.title2]}> 
      {strings.benefit_identifier} 
      </Text> 
     </View> 

     <View style={styles.rightButtonContainer}> 
      <TouchableHighlight 
      style={{padding: 7}} 
      underlayColor='#b59d6e' 
      onPress={() => { this.onExitPressed() }}> 
      <Text style={[appStyles.customFontRegular, styles.rightButtonTitle]}> 
       {strings.exit} 
      </Text> 
      </TouchableHighlight> 
     </View> 

     </View> 
    ); 
    } 
} 

它的工作原理好。那么我怎样才能改变我的场景NavBarCustom的标题1 MyPage？

在此先感谢。

Answer 1

您可以通过/通过发送信息/与props：

在渲染可以声明const内搭react-native-router-fluxActions，设置路由其中点，然后设置要通过的对象：

如果有一个登录主文件，然后重定向到一个注册视图，那么你声明constgoToRegister然后通过text其内容：

class Login extends Component { 
    render() { 
    const goToRegister =() => Actions.Register({text: 'From Login'}); 
    return(
     <View style={{flex:1}}> 
     <Text> 
      Login 
     </Text> 
     <TouchableHighlight onPress={goToRegister} style={{ marginTop: 100}}> 
      <Text>Go Register</Text> 
     </TouchableHighlight> 
     </View> 
    ) 
    } 
} 

然后您注册在你收到它只是在你的props为this.props.text：

class Register extends Component { 
    render() { 
    return(
     <View style={{flex:1}}> 
     <TouchableHighlight onPress={Actions.Login} style={{ marginTop: 100}}> 
     <Text>{ this.props.text }</Text> 
     </TouchableHighlight> 
     </View> 
    ) 
    } 
} 

在你的情况，你应该首先把你的标题的值也许如：

render() { 
    const goToMyPage =() => Actions.MyPage({ title: 'Some Title'}) 
    ... 

然后你可以使用它：

<Text style={[appStyles.customFontBold, styles.title1]}> 
    { this.props.title } 
</Text> 

Answer 2

场景需要一个标题PARAM

<Scene 
    key="myPage" 
    component={MyPage} 
    navBar={NavBarCustom} 
    hideNavBar={false} 
    title="myPage" 
/>