Question

我有一个通用的>组件。如何将“屏幕名称”传递给该组件？

我想将“屏幕名称”从Header传递到Home。

我想在其他组件中使用HeaderStyle并将“屏幕名称”传递给headerstyle

headerstyle

import HeaderStyle From './HeaderStyle '

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

Answer 1

创建一个函数并读取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>

Answer 2

您可以直接在屏幕组件内内部中通过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>

找到有关标题自定义here

的更多信息

Answer 3

非常感谢，我解决了问题

在主屏幕中，我这样发送屏幕名称

            <Headerstyle  title={"text"} />

在HeaderStyle中，我收到这样的标题

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

如何将屏幕名称传递给另一个组件

3 个答案: