时间戳

首页 > 解决方案 > 如何更改同一组件中的标题导航？

react-native - 如何更改同一组件中的标题导航？

问题描述

我的导航 initializeRoute 屏幕是 main.js

main.js 有一个 onAuthStateCHange 来检测当前用户的更改

如果当前用户是 loggend 主渲染组件“ChatScreen”，否则主渲染组件“LoginScreen”

问题是 chatScreen 和 LoginScreen 具有相同的导航标题栏（主标题栏）

我需要 loginscreen 没有标题，而 chatScreen 有

我尝试
在登录和聊天中使用静态 navigationOptions = {header: null}，但我们可以看到的 de header 是 main.js 的 header

如果我在 main 上设置 header null，则 chatScreen 也没有标题

 class App extends React.Component {

  constructor() {
    super();
    this.unsubscriber = null;
    this.state = {
      user: null,
    };
  }


  componentDidMount() {
    this.unsubscriber = firebase.auth().onAuthStateChanged((user) => {
      this.setState({ user });
    });
  }

  render() {
    if (!this.state.user) {
      return <Login />;
    }

    return <Chat />;

  }

}

标签： react-nativefirebase-authenticationreact-navigation

解决方案

解决方案是 main.js 屏幕中的以下内容，您可以保留导航。

// main.js
static navigationOptions = ({ navigation }) => {
  return { title: "", header: null 
  };
};

然后在 ChatScreen 屏幕中，您可以在不依赖 react-navigation 库的情况下个性化标题，您可以以个性化的方式进行操作。

// Chat.js
class Chat extends Component {
render() {
return (
   <SafeAreaView>
    {/*header*/}
    <View style={{justifyContent: 'center', alignItems: 'center'}}>
    <Text>Chat</Text>
    </View>
    {/*body*/}
    <View>
    </View>
    </SafeAreaView>
    );
   }
} 
export default Chat;

子组件 Chat 必须接收导航属性

<Chat navigation={this.props.navigation} />

反过来聊天的孩子应该通过。

<SonChat navigation={this.props.navigation} />

推荐阅读