在使用AppContainer问题的React Native中的所有页面中使用相同的自定义标题

Question

我正在使用react-native和react导航，我遇到了这个问题，因为我的屏幕不能正确呈现。我引用这个链接来使用相同的消失头作为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>
      )
  }
 }

或者另一种方法是将header组件传递给您的导航器，同时定义如下内容：

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)},
....
})

希望这能回答你的问题