react-native - react-navigation：带有嵌套导航器的全屏背景

Question

首先，对于正在寻找使用嵌套导航器显示全屏背景图像的解决方案的任何人，下面的代码将提供一个很好的开端。我找不到任何更好的资源，我花了一段时间才把它放在一起。

现在进入问题。问题是在使用嵌套导航器时似乎没有更好的方法来显示一致的全屏图像背景，这将是许多应用程序最常见的用例。理想情况下，您配置的背景图像RootStack就是这样。

下面代码的问题是MenuStack即使包裹在 a 中也不会显示背景图像，MenuStackWrapper并且当尝试在Menu组件本身中渲染图像时，图像调整大小不同，因此看起来像是在移动。

const MenuStack = createStackNavigator(
  {
    Menu,
    Log,
  },
  {
    headerMode: 'none'
  }
);

const MainStack = createBottomTabNavigator(
  {
    Now,
    Today,
    Menu: MenuStack
  },
  {
    initialRouteName: 'Now',
    tabBarOptions: {
      style: {
        backgroundColor: 'transparent'
      }
    }
  }
);

class MainStackWrapper extends Component {
  static router = MainStack.router;

  render() {
    return (
      <ImageBackground source={require('./res/images/bgr.png')} style={{ width: '100%', height: '100%' }} imageStyle={styles.backgroundImage}>
        <MainStack navigation={this.props.navigation} />
      </ImageBackground>
    );
  }
}

const AppStack = createStackNavigator(
  {
    Main: MainStackWrapper,
    Modal: ModalScreen
  },
  {
    mode: 'modal',
    headerMode: 'none',
    cardStyle: {
      backgroundColor: 'transparent'
    }
  }
);

const AuthStack = createSwitchNavigator({
  SignIn,
  SignUp,
  ForgotPass
});

const RootStack = createSwitchNavigator(
  {
    AuthLoading,
    Auth: AuthStack,
    App: AppStack
  },
  {
    initialRouteName: 'AuthLoading'
  }
);

type Props = {};
export default class App<Props> extends Component {
  render() {
    return (
        <ImageBackground source={require('./res/images/bgr.png')} style={{ width: '100%', height: '100%' }} imageStyle={styles.backgroundImage}>
          <StatusBar barStyle="light-content" backgroundColor="transparent" translucent={true} />
          <RootStack />
        </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  backgroundImage: {
    resizeMode: 'cover',
    width: null,
    height: null,
    backgroundColor: 'transparent',
    flex: 1,
    flexDirection: 'column'
  }
});

标签： react-nativereact-navigationmobile-application