【ReactNative】如何执行显示：渲染屏幕前的“none”

Question

我想通过一些代码更改在渲染屏幕之前执行 display: "none"。
现在{goodbotton} 会在屏幕渲染时临时出现。
目前我的代码如下。

...
const [ goodbotton, setGoodBotton ] = useState(<Image source={require('../../images/good_botton_inactive.png')} style={ {width: 65, height: 65} }/>);

 <TouchableOpacity
      onPress={() => {
        if (image.is_my_good) {
          postGood(image.id, false)
        } else {
          setGoodBotton(<Image source={require('../../images/good_botton.png')} style={ {width: 65, height: 65}}/>)
          postGood(image.id, true)
          setTimeout(() => {
            setGoodBotton(<Image source={require('../../images/good_botton_inactive.png')} style={ {width: 65, height: 65}}/>)
          }, 500)
        }
        }}>
        <View style={[image?.is_my_good ? styles.hide_good_botton : {}, commonStyles.shadow]} >
          {goodbotton}
        </View>
      </TouchableOpacity>

const styles = StyleSheet.create({
hide_good_botton: {
    display: "none"
  }
});

你有什么想法吗？

Answer 1

我在项目中看到的最常见的方法是使用状态变量来控制应用程序何时获取或处理某些内容。类似于：

    [isLoading, setIsLoading] = useState(true);

    // enter code here

    if (isLoading) { return (<View / Spinner / LoadingIcon / PlaceHolderView />) }

    return (
        <TouchableOpacity
            onPress={() => {
             ....