Question

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

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

以下代码的问题在于，MenuStack即使包裹在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-navigation：具有嵌套导航器的全屏背景

0 个答案: