相关疑难解决方法(0)

我正在尝试为 ios/android 应用程序中的每个屏幕使用相同的背景，而不会在屏幕转换时移动。在 React Navigation 4 中有这个解决方案：How to set background image with react native 和 react navigation？：

const AppNavigator = createAppContainer(
  createStackNavigator(
    {
      Home: {screen: Home},
      Vocabulary: {screen: Vocabulary},
      AddWord: {screen: AddWord},
    },
    {
      initialRouteName: 'Home',
      headerMode: 'none',
      cardStyle: {backgroundColor: 'transparent', shadowColor:'transparent'},
      transparentCard: true, 
      transitionConfig: () => ({
        containerStyle: {
          backgroundColor: 'transparent',
        },
      }),
    },
 ),
);

但是现在在第 5 版中，事情发生了变化！你可以这样做：

<Stack.Screen
  name="Screen2"
  component={Screen2}
  options={{
    cardStyle: {
      backgroundColor: 'transparent',
    },
    cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS
  }}
/>

您必须在每个屏幕上都这样做（这很好，虽然很尴尬），但是当您导航到一个新屏幕时，前一个屏幕只会移动到下方约 25% 的位置，因此它仍然可见，尽管它位于侧面少量。看起来真的很尴尬：

然后我考虑使用一个cardStyleInterpolator …

我在React-Native中使用Navigator组件.

//...
render() {
    return (
        <Navigator
            ref="navigator"
            navigationBar={this.renderHeader()}
            sceneStyle={styles.container}
            initialRoute={{type: 'Home'}}
            renderScene={this.renderScene.bind(this)} />
    );
}

现在我需要为所有场景设置固定的背景图像,但我无法将Navigator组件包装在另一个View中.

// No errors but background is ignored
render() {
    return (
        <View style={styles.navigatorContainer}>
            <Image source={require('image!logo-big')} style={styles.background} />  
            <Navigator
                ref="navigator"
                navigationBar={this.renderHeader()}
                sceneStyle={styles.container}
                initialRoute={{type: 'Home'}}
                renderScene={this.renderScene.bind(this)} />
        </View>
    );
}

var styles = StyleSheet.create({
    container: {
        flex: 1
    },
    background: {
        position: 'absolute',
        left: 0,
        top: 0,
        width: 1024,
        height: 768
    },
    navigatorContainer: {
        flex: 1,
        backgroundColor: '#FF0000'
    }
});

如果我将backgroundColor设置为类NavigatorContainer,我可以看到红色背景,但它不适用于图像.

有什么建议？