时间戳

首页 > 解决方案 > 组件返回白色空白屏幕

reactjs - 组件返回白色空白屏幕

问题描述

我正在尝试检查用户是否授权使用相机和位置，如果他没有，那么应该渲染一个简单的屏幕让他知道。该函数被调用，但返回语句返回空白屏幕而不是组件。

注意：我尝试使用 'backgroundColor: 'black' 来查看是否渲染，我什至看不到黑色背景。

代码：

 componentWillMount() {
  Permissions.checkMultiple(['camera', 'location']).then(response => {
    //response is an object mapping type to permission
      console.log('permission check')
      console.log('response.camera', response.camera)
      console.log('response.location', response.location)
      if (response.camera === 'denied' || response.location === 'denied') {
        return (

          <View>

          <Text>
              Sorry you cant use this app without allowing Location and Camera permmision
              to do it just go to Setting/Keepr and allow Location and Camera access for this app 
          </Text>

          <Button title={'go to settings'} onPress={Permissions.openSettings}></Button>

          </View>

        )
      }
  })
 }

标签： reactjsreact-native

解决方案

您正在尝试在componentWillMount... 和 Promise 回调中返回 JSX。这根本行不通，因为您需要从render方法返回 JSX。你可以使用 react-state 来做到这一点。例子：

class MyComponent extends React.Component {
  constructor(props) {
    this.state = {
      response: {}
    };
  }
  componentWillMount() {
    Permissions.checkMultiple(["camera", "location"]).then(response => {
      this.setState({ response });
    });
  }

  render() {
    const { response } = this.state;
    if (response.camera === "denied" || response.location === "denied") {
      return (
        <View>
          <Text>
            Sorry you cant use this app without allowing Location and Camera
            permmision to do it just go to Setting/Keepr and allow Location and
            Camera access for this app
          </Text>

          <Button title={"go to settings"} onPress={Permissions.openSettings} />
        </View>
      );
    }
    return <p>something</p>;
  }
}

推荐阅读