reactive-native-router-flux. Wie ändere ich die benutzerdefinierte navBar programmatisch?

Question

Ich habe eine benutzerdefinierte navBar in meiner Szene:

<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> 
    ); 
    } 
} 

Es ist gut funktioniert. Also, wie kann ich title1 von NavBarCustom von meiner Szene ändern MyPage?

Vielen Dank im Voraus.

Answer 1

Sie passieren kann/senden Informationen über/mit props:

In Ihrem machen Sie eine const erklären können, die nehmen Sie die react-native-router-fluxActions, um die Strecke eingestellt, die Zeigen Sie und geben Sie dann das Objekt, das übergeben werden soll:

Wenn es eine Login-Hauptdatei gibt, die dann zu einer Registeransicht umleitet, dann deklarieren Sie die constgoToRegister und dann die text mit seinem Inhalt übergeben:

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> 
    ) 
    } 
} 

Dann in Ihrem Register Sie es erhalten nur innerhalb Ihrer props als 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> 
    ) 
    } 
} 

In Ihrem Fall sollten Sie zunächst den Wert Ihres Titels senden vielleicht als:

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

Und dann sind Sie in der Lage, es zu benutzen:

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

Answer 2

Szene nimmt einen Titel param

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