react-native - react-native 使整个屏幕变黑

Question

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

标签： react-native

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'
      },
    })