我对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中。 此外，我如何从一开始就隐藏按钮?
当前回答
在render()中，你可以有条件地显示JSX或返回null，如下:
render(){
return({yourCondition ? <yourComponent /> : null});
}
其他回答
如果你想隐藏它，但保持空间被组件占用，如css的可见性:隐藏设置在组件的样式不透明度:0应该做的技巧。
由于可能与不可见项交互，可能需要禁用该功能的其他步骤，这取决于组件。
在你的渲染函数中:
{ this.state.showTheThing &&
<TextInput/>
}
然后就这样做:
this.setState({showTheThing: true}) // to show it
this.setState({showTheThing: false}) // to hide it
显示\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>
}
您可以使用这些条件来显示和隐藏组件
constructor(){
super();
this.state ={
isVisible:true
}
}
ToggleFunction = () => {
this.setState(state => ({
isVisible: !state.isVisible
}));
};
render() {
return (
<View style={styles.MainContainer}>
{
this.state.isVisible ? <Text style= {{ fontSize: 20, color: "red", textAlign: 'center' }}> Hello World! </Text> : null
}
<Button title="Toggle Visibility" onPress={this.ToggleFunction} />
</View>
);
}
在render()中，你可以有条件地显示JSX或返回null，如下:
render(){
return({yourCondition ? <yourComponent /> : null});
}
