React native 反应导航：带有嵌套导航器的全屏背景

首先，对于任何想用嵌套导航器显示全屏背景图像的人来说，下面的代码将是一个很好的开端。我找不到更好的资源了，我花了一段时间才把它整理好

现在来谈谈这个问题。问题是，在使用嵌套导航器时，似乎没有更好的方法来显示一致的全屏图像背景，这对于许多应用程序来说是最常见的使用情况。理想情况下，您可以为

RootStack

配置背景图像

下面代码的问题是，

MenuStack

即使包装在

MenuStackWrapper

中，也不会显示背景图像，并且当尝试在

菜单

组件中渲染图像时，图像的大小会有所不同，因此看起来像是在移动

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'
  }
});

const MenuStack=createStackNavigator(
{
菜单，
日志
},
{
headerMode:“无”
}
);
const MainStack=createBottomTabNavigator(
{
现在，
今天
菜单：菜单堆栈
},
{
initialRouteName:'现在'，
选项卡选项：{
风格：{
背景颜色：“透明”
}
}
}
);
类MainStackWrapper扩展组件{
静态路由器=MainStack.router；
render（）{
返回(
);
}
}
const AppStack=createStackNavigator(
{
Main:MainStackWrapper，
模态：模态屏幕
},
{
模式：“模态”，
headerMode:“无”，
卡片样式：{
背景颜色：“透明”
}
}
);
const AuthStack=createSwitchNavigator({
签名，
报名，
放弃通行证
});
const RootStack=createSwitchNavigator(
{
授权加载，
Auth:AuthStack，
应用程序：AppStack
},
{
initialRouteName:“AuthLoading”
}
);
类型Props={}；
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
背景图片：{
resizeMode:“封面”，
宽度：空，
高度：空，
背景色：“透明”，
弹性：1，
flexDirection:“列”
}
});