我对React Native真的很陌生，我想知道如何隐藏/显示组件。 下面是我的测试用例:
<TextInput
onFocus={this.showCancel()}
onChangeText={(text) => this.doSearch({input: text})} />
<TouchableHighlight
onPress={this.hideCancel()}>
<View>
<Text style={styles.cancelButtonText}>Cancel</Text>
</View>
</TouchableHighlight>
我有一个TextInput组件，我想要的是在输入得到焦点时显示TouchableHighlight，然后在用户按下取消按钮时隐藏TouchableHighlight。
我不知道如何“访问”TouchableHighlight组件，以便隐藏/显示它在我的函数showCancel/ hideccancel中。 此外，我如何从一开始就隐藏按钮?
当前回答
下面的例子是用Hooks在typescript中编码。
import React, { useState, useEffect } from "react";
........
const App = () => {
const [showScrollView, setShowScrollView] = useState(false);
......
const onPress = () => {
// toggle true or false
setShowScrollView(!showScrollView);
}
......
</MapboxGL.ShapeSource>
<View>{showScrollView ? (<DetailsScrollView />) : null}</View>
</MapboxGL.MapView>
......
}
其他回答
如果你不想从你的页面中删除组件，比如隐藏一个WebView，我可以保证使用opaque方法。
<WebView
style={{opacity: 0}} // Hide component
source={{uri: 'https://www.google.com/'}}
/>
如果你需要向第三方网站提交表单，这是很有用的。
显示\hide组件的三种方法:
——类组件 : / ------------------------------------------------------------------------------------------------------------
在我使用的所有例子中，如下所示:
.
...
constructor(props) {
super(props);
this.state = {showComponent: true};
}
1. 使用展示道具
<View display={this.state.showComponent ? 'flex' : 'none'} />
2. 使用有风格的显示道具
<View style={{display:this.state.showComponent ? 'flex' : 'none'}} />
3.限制呈现
{
this.state.showComponent &&
<View /> // Or <View> ... </View>
}
——功能组件 :/ ------------------------------------------------------------------------------------------------------------
在我使用的所有例子中，如下所示:
const [showComponent, setShowComponent] = useState(true);
1. 使用展示道具
<View display={showComponent ? 'flex' : 'none'} />
2. 使用有风格的显示道具
<View style={{showComponent ? 'flex' : 'none'}} />
3.限制呈现
{
showComponent &&
<View /> // Or <View> ... </View>
}
只是简单地使用这个，因为我想使用“useRef”条件对我来说不是一个选项。当你想使用useRef钩子并按下按钮时，你可以使用这个假设。
<Button
ref={uploadbtn}
buttonStyle={{ width: 0, height: 0, opacity: 0, display: "none" }}
onPress={pickImage}
/>
只使用
style={ width:0, height:0 } // to hide
你可以使用我的模块react-native-display来显示/隐藏组件。
