将替换与React Hooks React Native混淆

Question

我试图用React Hooks的if条件使异步等待。下面的代码是在我试图让它成为React Hooks:之前

async startService() {
if (Platform.OS !== 'android') {
console.log('Only Android platform is supported');
return;
}
if (Platform.Version >= 26) {
const channelConfig = {
id: 'ForegroundServiceChannel',
name: 'Notification Channel',
description: 'Notification Channel for Foreground Service',
enableVibration: true,
importance: 2
};
await VIForegroundService.createNotificationChannel(channelConfig);
}
}

我想把它做成React Hooks

useEffect(() => {
async function startService() {
if (Platform.OS !== 'android') {
console.log('Only Android platform is supported');
return;
}
if (Platform.Version >= 26) {
const channelConfig = {
id: 'ForegroundServiceChannel',
name: 'Notification Channel',
description: 'Notification Channel for Foreground Service',
enableVibration: false,
importance: 2
};
await VIForegroundService.createNotificationChannel(channelConfig);
}
const notificationConfig = {
id: 3456,
title: 'Foreground Service',
text: 'Foreground service is running',
icon: 'ic_notification',
priority: 0
};
if (Platform.Version >= 26) {
notificationConfig.channelId = 'ForegroundServiceChannel';
}
await VIForegroundService.startService(notificationConfig);
}startService();
}, []);

我也试着在我的jsx中这样称呼它：

<Button onPress={() => this.startService()}>
<Text>Tes</Text>
</Button>

它不起作用，我写错了吗？

Answer 1

根据您的代码，函数startService()的作用域在useEffect内部的箭头函数内。只能从useEffect中的箭头功能中访问。您要做的是调用块中没有作用域的函数。

第二件事，useEffect不是要显式调用的东西。效果将基于依赖数组启动。Ryan Florance在这段视频中漂亮地解释了如何使用useEffect钩子。

要使您的代码工作，您根本不需要useEffect。只需将startService()的函数定义从useEffect移到主函数内部或函数外部(如果它没有任何其他依赖项(。

如果你的目标是只启动一次startService()，你可以按照以下方式使用useEffect：

useEffect(() => {
startService();
},[]);

另外，Button组件的使用不正确。做如下操作：

<Button title="Tes" onPress={startService} />