Question

我试图在按下按钮时有条件地启用/禁用此ScrollView，而不重新渲染嵌套在其中的View和CardDeck。有任何想法吗？所有帮助表示赞赏！

[link text](URL)

Answer 1

您只能处理显示在React应用程序中隐藏任何东西的情况，当您更新状态或什么都不会改变时，此状态可以是View的不透明度，也可以如下设置某些状态并根据显示您的代码。

例如：

const[state,setState]=useState(false);
<>
  <ScrollView>
<Button title='hello' onPress={()=>{setState(!state)}} />
    <View >
        {state && <CardDeck 
        infoStyles={handleInfoStyle}
        />}
    </View>
  </ScrollView>
</>

仅在状态为真（单击后）时，才会显示CardDeck

Answer 2

当我需要快速显示/隐藏自定义键盘（带有大量按钮）时遇到了这个问题。您可以尝试类似

<View style={this.state.showScrollView? {top: 0, bottom: 0, left: 0, right: 0, position: "absolute"} : {overflow: "hidden"}}>
    <ScrollView>
        ...
    </ScrollView>
</View>

（您可能需要使用React.memo或PureComponent之类的东西使滚动视图变得纯净，和/或使用View的pointerEvents道具来使之正常工作。）但是，这个想法是在更高层次上切换可见性因此您的ScrollView可以舒适地保持不变。

Answer 3

您可以直接使用本机道具启用/禁用scoll状态，而不会在任何地方触发任何重新渲染。

 onButonPress = () => {
     this.scrollViewRef.setNativeProps({ scrollEnabled: false })
 }

 <ScrollView ref={ref => this.scrollViewRef = ref}>
     <View>
         <CardDeck 
             infoStyles={handleInfoStyle}
         />
     </View>
 </ScrollView>

如何有条件地渲染组件而不重新渲染嵌套的组件？

3 个答案: