Используйте один и тот же настраиваемый заголовок на всех страницах в React Native, используя проблемы AppContainer

Question

Я использую реагирующий на родство с реагирующей навигацией, и я сталкиваюсь с этой проблемой, когда мои экраны отображаются неправильно. Я ссылаюсь на эту ссылку, чтобы использовать тот же исчезающий заголовок, что и обертку вокруг моего AppContainer: https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e

Первый экран AuthLoadingScreen отображается нормально, а затем предполагается перейти к одному из стеков в зависимости от того, проверен ли пользователь. Но по какой-то причине ничего не появляется после того, как пользователь проверен или нет. У меня есть console.log при входе в оба стека, и они оба стреляют нормально, просто ничего не рендерится ... любые идеи приветствуются.

Вот некоторые фрагменты кода, которые у меня есть:

<- App.js ->

<View style={styles.fill}>
        <Animated.ScrollView
          style={styles.fill}
          scrollEventThrottle={1}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
            { useNativeDriver: true },
          )}
        >
          <-----My AppContainer----->
          <AppContainer /> 
          <------------------------->
        </Animated.ScrollView>
        <Animated.View
          pointerEvents="none"
          style={[
            styles.header,
            { transform: [{ translateY: headerTranslate }] },
          ]}
        >
          <Animated.Image
            style={[
              styles.backgroundImage,
              {
                opacity: imageOpacity,
                transform: [{ translateY: imageTranslate }],
              },
            ]}
            source={require('./assets/images/casino/casino-10.jpg')}
          />
        </Animated.View>
      </View>

<-My App Container consists of->:

import AuthLoadingScreen from '../screens/AuthLoadingScreen';

const AppStack = createStackNavigator({
  Home: { screen: HomeScreen },
  Settings: { screen: SettingsScreen },
  OfferCategories: { screen: OfferCategoriesScreen },
});

const AuthStack = createStackNavigator({
  Login: LoginScreen
});

export default createAppContainer({createSwitchNavigator({
  AuthLoading: AuthLoadingScreen,
  App: AppStack,
  Auth: AuthStack,
})});

Answer 1

Вы можете сделать это с двумя вариантами: Деформация в AppContainer или определить раздел заголовка внутри верхнего уровня навигаторов:

позволяет начать с первого варианта: вы можете сделать

const AppContainerNavigator = createAppContainer({createSwitchNavigator({
  AuthLoading: AuthLoadingScreen,
  App: AppStack,
  Auth: AuthStack,
})});
export default class AppContainer extends Component {
 render() {
  return (
    <YOUR_HEADER_COMPONENT>
     <AppContainerNavigator
       ref={nav => {
         this.navigator = nav;
       }}
      />
    </YOUR_HEADER_COMPONENT>
      )
  }
 }

Или другой - передать компонент заголовка навигатору, задав его следующим образом:

let MY_HEADER_COMPONENT = {
  headerLeft: () => {
    return null;
  },
  header: () => {
    return <YOUR_HEADER_COMPONENT></YOUR_HEADER_COMPONENT>;
  },
  headerRight: () => {
    return null;
  }
};
export default createStackNavigator({
 AuthLoading:{
    screen: AuthLoadingScreen,
    navigationOptions: ({
      navigation
    }) => (MY_HEADER_COMPONENT)},

    App:{
    screen: AppStack,
    navigationOptions: ({
      navigation
    }) => (MY_HEADER_COMPONENT)},
....
})

Надеюсь, это ответит на ваш вопрос