0
votes

Comment passer le nom d'écran à un autre composant

J'ai un composant Header commun. Comment puis-je transmettre le 'Nom d'écran' à ce composant?

Je veux transmettre le 'Nom d'écran' de Accueil à HeaderStyle.

Je veux utiliser le headerstyle dans un autre composant et passer 'Screen Name' au headerstyle

  export default class HeaderStyle extends Component {
     render() {
        return (
            <View>
                <Header >
                    <View style={{
                        width: width, height: hp('12%'),
                        flexDirection: 'row', backgroundColor: '#141414'
                    }} >

                        <Left>
                            <Image style={styles.logo}
                                source={require('../assets/images/1x/logo.png')}>
                            </Image>
                        </Left>

                        <View style={{ marginLeft: 280, marginTop: 20 }}>
                            <Text style={{ color: 'white', fontSize: 35, fontWeight: 'bold' }}>
                                Should be Dynamic Screen Name</Text></View>

                        <Right>
                            <TouchableOpacity onPress={this.ShowHideComponent2}>
                                <Image style={styles.imgsearch} source={require('../assets/test/a.png')}>
                                </Image>

                            </TouchableOpacity>

                        </Right>

                    </View>

                </Header>
                {this.showAssests()}
            </View>
        );
     }
  }

import HeaderStyle From './HeaderStyle '

export default class Home extends Component {
    render (){
        return (
        // <HeaderStyle>Screen Name</HeaderStyle>
        <HeaderStyle Name={"Screen Name"}/>
        <HeaderStyle />
        )
    }

reactjs react-native react-router react-navigation react-component

1 commentaires

pouvez-vous publier plus de code à partir de quel composant vous envoyez la valeur des accessoires et où vous devez utiliser cette valeur dans le composant ci-dessus

3 Réponses :

0
votes

Créez une fonction et lisez window.location.pathname , puis dans le composant Header, rendez cette fonction, par exemple

export default function currentScreenName(){
   let screenName = '';
   switch(window.location.pathname){
     case '/employees':
        screenName = 'Employees';
        break;
     case '/admin':
        screenName = 'Admin';
        break;
     default:
        screenName = 'Dashboard';
   }
   return screenName;
}

//Header.js
<h1>{currentScreenName()}</h1>

0 commentaires

0
votes

Vous pouvez simplement passer le prop header dans static navigationOptions directement à l'intérieur du composant écran.

Par exemple

Dans votre composant d'écran

 <Text style={{ color: 'white', fontSize: 35, fontWeight: 'bold' }}>
     {this.props.Name}
 </Text>

À l'intérieur du composant HeaderStyle , utilisez les accessoires dans le texte

    class HomeScreen extends React.Component {
      static navigationOptions = ({ navigation }) => {
        header: <HeaderStyle Name={"Screen Name"}/>
       };
      /* render function, etc */
    }

Pour plus d'informations sur la personnalisation des en-têtes, ici

1 commentaires

merci mais dans le HeaderStyle comment recevoir le nom et le mettre dans render render () {return ( {Name} )}

0
votes

merci beaucoup je résous le problème

dans l'écran d'accueil, j'envoie le nom d'écran comme celui-ci

<Text >{this.props.title}</Text>

et dans le HeaderStyle je reçois le titre comme celui-ci

            <Headerstyle  title={"text"} />

0 commentaires