React Navigation 中的过渡背景颜色

Question

当从一个屏幕过渡到另一个屏幕时（使用卡片或模式模式），在屏幕动画期间，有一个白色背景，其 alpha 从 0 到 1 过渡。

如果可能的话，我想知道如何改变颜色。

---

环境

• React Native Navigation 版本：1.0.0-beta.11
• React Native 版本：0.45.1
• 平台：iOS 和 Android
• 设备：iOS 10.3、iPhone 6

---

我用来创建 StackNavigation 的一些代码

注意：@Jason Gaare 的回答 https://stackoverflow.com/a/45065542/976655 解决了模态背景颜色，现在 StackNavigation 上的问题仍然存在

let navOptions = {
    headerMode: 'screen',
    navigationOptions: ({navigation}) => ({
        headerTintColor: '#fff',
        headerStyle: {
            backgroundColor: '#1A1A1A',
        },
        headerTitleStyle: {
            color: '#fff',
            fontFamily: 'my-font'
        },
        headerLeft: (<ImageBtn
                        buttonStyle={{ .. }}
                        buttonHighlightStyle={{}}
                        source={ myImage }
                        imageStyle={{ ... }}
                        callback={navigation.goBack.bind(this, null)} />)
    })
};

const MyTab = StackNavigator({
    MyScreen1: {screen: MyScreen1},
    MyScreen2: {screen: MyScreen2},
    MyScreen3: {screen: MyScreen3},
    MyScreen4: {screen: MyScreen4},
}, navOptions);

Answer 1

我只是通过添加解决了它

 <View style={{ 
    position: 'absolute',
    height: '100%', 
    width: '100%', 
    backgroundColor: <whatever-color-you-want> 
 }}/>

就在我的<Stack.Navigator/>上方

Answer 2

我通过将它添加到我的 StackNavigator 解决了这个问题：

cardStyle: {
  backgroundColor: 'rgba(0,0,0,0)',
  opacity: 1,
},

现在过渡是完全透明的。 我正在使用"react-navigation": "^1.5.11"。

Answer 3

您提到的问题 (#563) 已于 2015 年 4 月通过将默认过渡颜色从 #555555 更新为透明而关闭。可以通过在导航器中设置背景样式来应用过渡颜色，如下所示：

<Navigator
  style={{flex: 1}} // style for the navigator container
  transitionerStyle={{backgroundColor: 'black'}} // style applied to the scenes container
 ...

您不知道此修复程序并不奇怪；一年多后，也就是 2016 年 5 月，有人 ('alvaromb') 对已解决的问题发表了评论，称“这不应该记录在案吗？”所以显然用户没有意识到这一点。

显然，类似的背景颜色问题（和其他问题）已在 react-native-router-flux（2017 年 7 月 8 日发布）的第 4 版中修复，可能是通过相同/类似的代码更新。

Answer 4

查看 AppDelegate.m：

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                  moduleName:@"Example"
                                           initialProperties:nil
                                               launchOptions:launchOptions];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

尝试更改 rootview 上的 backgroundColor！这可能会帮助您实现目标。