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" 
/>