Question

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

如果可能，我想知道如何更改颜色。

环境

React Native Navigation版本：1.0.0-beta.11
React Native version：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

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

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

你没有意识到你没有意识到这个问题;有人（'alvaromb'）在一年后的2016年5月就固定问题发表评论，评论说“这不应该记录在案吗？”显然用户并没有意识到这一点。

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

Answer 2

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

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

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

Answer 3

查看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！这可能有助于您实现目标。

Answer 4

我只是通过添加解决了

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

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

在React Navigation

环境

我用来创建StackNavigation的一些代码

4 个答案: