Как передать отображаемое имя другому компоненту - PullRequest
Новая
       52

Как передать отображаемое имя другому компоненту

0 голосов
/ 16 мая 2019

У меня есть общий Header компонент. Как я могу передать 'Screen Name' этому компоненту?

Я хочу передать 'Screen Name' от Home до HeaderStyle.

Я хочу использовать headerstyle в другом компоненте и передать 'Screen Name' в headerstyle 

import HeaderStyle From './HeaderStyle '

export default class Home extends Component {
    render (){
        return (
        // <HeaderStyle>Screen Name</HeaderStyle>
        <HeaderStyle Name={"Screen Name"}/>
        <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>
        );
     }
  }

Ответы [ 3 ]

0 голосов
/ 16 мая 2019

Вы можете просто передать header опору в static navigationOptions напрямую внутри компонента экрана.

Например

В вашем экране компонент 

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

Внутри HeaderStyle компонент использует реквизиты в тексте 

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

Дополнительная информация о настройке заголовка здесь

0 голосов
/ 20 мая 2019

спасибо большое, я решаю проблему

на главном экране я посылаю имя экрана, как это 

            <Headerstyle  title={"text"} />

и в HeaderStyle я получаю такой заголовок 

<Text >{this.props.title}</Text>
0 голосов
/ 16 мая 2019

Создайте функцию и прочитайте window.location.pathname, затем в компоненте Header отредактируйте эту функцию, например

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>
...