useEffect内部的React Native setState未触发reender

Question

我正在尝试构建一个使用Expo AV播放音频文件的组件。在音频可用之前，我希望组件以降低的不透明度(不透明度=0.2(进行渲染。加载音频后，我希望按钮变为完全不透明度。我尝试使用useEffect挂钩(没有依赖项，只想在组件安装时加载一次音频文件(和一个名为"isLoaded"的状态变量来实现这一点。这是代码：

const AudioPlayer = ({ containerStyle }) => {
const [isPlaying, setIsPlaying] = useState(false);
const [voice, setVoice] = useState(undefined);
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
const fetchSound = async () => {
const { sound } = await Audio.Sound.createAsync(DEFAULT_AUDIO_PATH);
setVoice(sound);
setIsLoaded(true);
}
fetchSound();
}, []);
const playSound = async () => {
if (isLoaded) {
try {
voice.setOnPlaybackStatusUpdate(status => {
status.didJustFinish ? setIsPlaying(false) : null;
});
setIsPlaying(true);
await voice.replayAsync();
} catch (e) {
console.log(e);
}
}
}
return (
<TouchableOpacity
style={isLoaded ? [styles.container, containerStyle] : [styles.unloaded, containerStyle]}
onPress={playSound}>
<View style={styles.icon_wrapper}>
<FontAwesome
name={isPlaying ? 'volume-up' : 'play'}
style={styles.icon}
/>
</View>
</TouchableOpacity>
);
}

直到我按下按钮，组件的不透明度才会改变，此时组件开始按预期渲染，因此很明显，isLoaded状态是从useEffect挂钩设置的。我在这里做错了什么？

Answer 1

对于有类似问题的人来说，TouchableOpacity似乎有一个错误，对元素进行的任何不透明度更改都只在按下组件时触发。

要解决此问题，只需将TouchableOpacity更改为Pressable即可。