Как изменить заголовок навигации в том же компоненте? - PullRequest
Новая
       12

Как изменить заголовок навигации в том же компоненте?

0 голосов
/ 04 июня 2019

мой экран initializeRoute для навигации - main.js

main.js имеет onAuthStateCHange для обнаружения изменений текущего пользователя

, если текущий пользователь является компонентом основного рендеринга loggend "ChatScreen" остальное главная рендер компота "LoginScreen"

проблема в том, что chatScreen и LoginScreen имеют одинаковую панель заголовка навигации (главная строка заголовка)

Мне нужно, чтобы на экране входа не было заголовка, а на ChatScreen есть

Я пытался использовать
static navigationOptions = {header: null} в логине и чате, но de header, который мы можем увидеть, это заголовок main.js

если я установил нулевой заголовок на главном, то 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 />;

  }

}

1 Ответ

0 голосов
/ 04 июня 2019

Решение заключается в следующем на экране 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 должен получить навигационные свойства 

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

и, в свою очередь, дети чата должны быть пропущены. 

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