javascript - 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

您提到的问题 (#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 的版本 4 中修复了类似的背景颜色问题(以及其他问题) (2017 年 7 月 8 日发布)，大概是通过相同/相似的代码更新。