Как изменить навигацию заголовка в том же компоненте?
мой навигационный экран initializeRoute - это main.js
main.js имеет onAuthStateChange для обнаружения изменений текущего пользователя
если текущий пользователь зарегистрирован, основной компонент рендеринга "ChatScreen" иначе основной рендеринг компоста "LoginScreen"
проблема в том, что chatScreen и LoginScreen имеют одинаковую панель заголовка навигации (основная панель заголовка)
Мне нужно, чтобы на экране входа в систему не было заголовка, а на экране чата
я пытался использовать
static navigationOptions = {header: null} в логине и чате, но заголовок, который мы видим, является заголовком main.js
если я установлю нулевой заголовок на главном экране чата, он тоже будет без заголовка
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 />;
}
}
Ответы 1
Решение следующее: на экране main.js вы оставляете навигацию такой, какая она есть.
// main.js
static navigationOptions = ({ navigation }) => {
return { title: "", header: null
};
};Затем на экране ChatScreen вы персонализируете заголовок, не завися от библиотеки реагирования и навигации, вы делаете это персонализированным образом.
// 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 navigation = {this.props.navigation} />и в свою очередь чат дети должны быть пропущены.
<SonChat navigation = {this.props.navigation} />