Блог

Я использую react-native с react-navigation, и я сталкиваюсь с этой проблемой, когда мои экраны отображаются неправильно. Я ссылаюсь на эту ссылку, чтобы использовать тот же исчезающий заголовок в качестве оболочки вокруг моего 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,
})});
  

Вы можете сделать это двумя способами: деформировать в 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)},
....
})
  

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