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

Question

我正在使用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,
})});

Answer 1

您可以使用两个选项：AppContainer中的Warp，或者在导航器顶层内定义标题部分：

让我们从第一个选项开始：你可以做到

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

希望这能回答你的问题