javascript - React Native - 授予权限后切换到其他屏幕

Question

所以我有 2 个屏幕，SplashScreen.js 和 Auth.js。在 SplashScreen.js 中是 Android 运行的所有权限，如果授予它，它将导航到 AuthScreen.js。

但就我而言，在授予应用程序崩溃后。我只是不知道为什么。

所以我想要发生的是，在 Android 授予权限后，它将导航到 AuthScreen.js。

这是我的代码:

SplashScreen.js:它位于 class SplashScreen extendses Component {}

内

constructor(props) {
super(props);

this.state = {
  timePassed: false
};
}

componentDidMount() {
this.permissionAndroid();
};

setTimePassed() {
this.setState({timePassed: true})
};

permissionAndroid = () => {
try {
  const granted = PermissionsAndroid.requestMultiple(
    [PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION, PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE],
    {
      title: "Location Permission",
      message: "You have to, because it's a party app! " + "So you can enjoy more viewing events.",
      buttonNeutral: "Ask me later",
      buttonNegative: "Cancel",
      buttonPositive: "OK"
    },
  );
  if (granted == PermissionsAndroid.RESULTS.GRANTED) {
    console.log("All permision enabledenabled")
    // this.setTimePassed();
    this.setState({timePassed: true})
  } else {
    console.log('Location Permission Denied');
  }
} catch (err) {
  console.warn(err);
}
}

render() {
if(!this.state.timePassed) {
  return (
    <View style={styles.container}>
      <Text>Hello</Text>
    </View>
  );
} else {
  return <AuthScreen/>
}
};

我在带有async function的类之外还有Permission Android的代码，我现在没有使用它，因为this.setState({})或函数我认为 setTimePassed() 不起作用，因为它在类之外。

这是使应用程序正常工作的另一种选择，但我只是不确定 setState({}) 或 setTimePassed() 当它通过时将如何工作类外。

此代码也在 SplashScreen.js 中:(它也与函数 permissionAndroid 相同，只是有一个异步函数)

async function requestLocationPermission() {
try {
const granted = await PermissionsAndroid.requestMultiple(
  [PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION, PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE],
  {
    title: "Location Permission",
    message: "You have to, because it's a party app! " + "So you can enjoy more viewing events.",
    buttonNeutral: "Ask me later",
    buttonNegative: "Cancel",
    buttonPositive: "OK"
  },
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
  console.log("All permision enabledenabled")
  // setTimePassed();
  this.setState({
    timePassed: true
  });
} else {
  console.log('Location Permission Denied');
}
} catch (err) {
  console.warn(err);
}
}

Answer 1

您应该首先将 permissionAndroid 标记为异步，因为它是一个异步函数，并使用 await。我检查了 React Native docs他们声明 PermissionsAndroid.requestMultiple() :

“提示用户在同一对话框中启用多个权限，并返回一个对象，其中权限作为键，字符串作为值(请参阅上面的结果字符串)，指示用户是允许还是拒绝该请求，或者不想被询问再次。”

因此这个函数不会返回像PermissionsAndroid.request()那样的boolean，而是返回一个具有以下结构的对象:

const granted = PermissionsAndroid.requestMultiple(
    [PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION, PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE],
    {
      title: "Location Permission",
      message: "You have to, because it's a party app! " + "So you can enjoy more viewing events.",
      buttonNeutral: "Ask me later",
      buttonNegative: "Cancel",
      buttonPositive: "OK"
    }
);

console.log(granted); // { PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION : true, PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE : false }

至于requestLocationPermission，你是对的:你不能在Component类之外调用setState。您可以使用回调作为参数，在其中您可以执行两种场景(授予和拒绝)所需的操作。或者您可以简单地将代码移动到类中。

@dimonD 是对的，您应该使用导航框架，例如 React Navigation 或 React Native Navigation。