Добавить одноразовый экран приветствия в React Native

#react-native #react-navigation

#react-native #реакция-навигация

Вопрос:

Я создал экран приветствия в своем приложении, который я хочу показать в начале первого запуска. Теперь я использую AsyncStorage для сохранения значения в первый раз и использую это значение для отображения домашней страницы или страницы приветствия. В настоящее время это так:

     componentDidMount() {
           AsyncStorage.getItem('first_time').then((value) => {
           this.setState({ showRealApp: !value, loading: false });
     });
    

  
  if (this.state.showRealApp === true) {
    return (
            <View>
              <Text>Welcome Page</Text>
            </View>
        )}
  else {
   return (
       <Home/>
      )
  }
        
}  

Теперь это работает нормально. Но на моей странице приветствия нет заголовка, но есть домашняя страница. Итак, когда он показывает домашнюю страницу, заголовок отсутствует. Как я могу получить заголовок. Я использую заголовок навигации react для обоих. Также оба экрана находятся в моем навигаторе стека. Заголовок моей страницы приветствия равен нулю, а заголовок домашней страницы — нет. Как я могу показать заголовок домашней страницы с помощью этого. Вот мой навигатор стека:

 const HomeStack = createStackNavigator(
    {
        FirstTimePage: { screen: FirstTimePage },
        Home: { screen: HomeScreen },
        ListAllScreen: { screen: ListAllScreen },
        DetailScreen: { screen: DetailScreen },
        CategoryScreen: { screen: CategoryScreen },
        ReviewsScreen: { screen: ReviewsScreen },
        NotificationScreen: { screen: NotificationScreen },
    },  

Ответ №1:

Вы неправильно перешли на домашнюю страницу с помощью navigation.navigate(‘Home’)

 class FirstTimePage extends React.Component{

    componentDidMount() {
            AsyncStorage.getItem('first_time').then((value) => {
            this.setState({ showRealApp: !value, loading: false });
        });  
    }
    render(){
        const {navigation} = this.props;
        
        if (this.state.showRealApp === true) {
            return (
                    <View>
                        <Text>Welcome Page</Text>
                    </View>
            )
        }
        else {
            navigation.navigate('Home');
        }
    }
}