反应原生DrawerLayoutAndroid背景颜色不起作用

时间:2016-07-09 07:40:15

标签: react-native

我正在尝试创建一个白色且不透明度为50%的drawingLayout。

所以我从文档中复制了代码并编写了

<DrawerLayoutAndroid
  drawerWidth={200}
  drawerPosition={DrawerLayoutAndroid.positions.Left}
  renderNavigationView={() => navigationView}
  drawerBackgroundColor="rgba(0,0,0,0.5)">

但抽屉出现完全不透明的白色

然后我试着试着看看如果我把它变成黑色会发生什么

<DrawerLayoutAndroid
  drawerWidth={200}
  drawerPosition={DrawerLayoutAndroid.positions.Left}
  renderNavigationView={() => navigationView}
  drawerBackgroundColor="rgba(255,255,255,1)">

但它仍然是白色的

1 个答案:

答案 0 :(得分:1)

您必须在navigationView中更改样式。在navigationView中更改容器的背景颜色。

    var DrawerExample = React.createClass({

        render: function() {
            var navigationView = (
                <View style={{flex: 1, backgroundColor: 'rgba(255,255,255,0.5)'}}>
                    <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>

                </View>
            );
            return (
                <DrawerLayoutAndroid
                    drawerWidth={300}
                    drawerPosition={DrawerLayoutAndroid.positions.Left}
                    renderNavigationView={() => navigationView}>
                    <View style={{flex: 1, alignItems: 'center'}}>
                        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
                        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>

                    </View>
                </DrawerLayoutAndroid>
            );
        },
    });