我对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});
}
其他回答
在render()中，你可以有条件地显示JSX或返回null，如下:
render(){
return({yourCondition ? <yourComponent /> : null});
}
在你的渲染函数中:
{ this.state.showTheThing &&
<TextInput/>
}
然后就这样做:
this.setState({showTheThing: true}) // to show it
this.setState({showTheThing: false}) // to hide it
我是这样解决这个问题的:
<视图样式={{display: stateLoad ?'none': undefined}} />
你可以使用我的模块react-native-display来显示/隐藏组件。
下面的例子是用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>
......
}
