组件返回白色空白屏幕

时间:2018-06-02 09:48:00

标签: reactjs react-native

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

注意: 我尝试使用'backgroundColor:'black'ti看看是否渲染,我甚至看不到黑色背景。

代码:

 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>

        )
      }
  })
 } 

1 个答案:

答案 0 :(得分:2)

您正试图在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>;
  }
}