Question

在react-native（expo）中，我想按一下按钮使整个屏幕变黑。我的意思是我想隐藏（在屏幕的所有区域（包括状态栏）的顶部显示一个全黑的容器。有人知道我该怎么做吗？

Answer 1

是的，这很简单。

第1步：使用主父视图容器包装您的所有内容

第2步：尝试根据状态为它提供动态样式或内联样式。

第3步：打开按下按钮更新状态，然后在状态更改后立即使视图覆盖整个屏幕。

步骤4：注意-使用Dimensions.get（'screen'）。height，因为它将覆盖包括状态栏在内的整个屏幕。

      constructor(props) {
        super(props);
        this.state = {
    makeScreenBlack : false
        };
      }

      render() {
    const {makeScreenBlack} = this.state;

        return (
    <React.Fragment>
    makeScreenBlack === true && <View style={styles.mainView}/>
    {this.props.children} //Whatever you want to render.
    <Button onPress = {() =>this.setState({makeScreenBlack : true})}/>
    <React.Fragment>
        );
      }


    export default StyleSheet.create({
      mainView: {
    height : Dimensions.get('screen').height,
width : Dimensions.get('screen').width,
    backgroundColor : 'black'
      },
    })

Answer 2

尝试一下：

<View style={{backgroundColor: 'black'}}>
    <Text style={{ color: "red" }}>Some Text</Text>
</View>

反应本机使整个屏幕变黑

2 个答案: