我对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中。 此外，我如何从一开始就隐藏按钮?
当前回答
constructor(props) {
super(props);
this.state = {
visible: true,
}
}
声明visible为false，默认情况下模式/视图是隐藏的
示例= ()=> {
this.setState({ visible: !this.state.visible })
}
函数调用**
{this.state.visible == false ?
<View>
<TouchableOpacity
onPress= {() => this.example()}> // call function
<Text>
show view
</Text>
</TouchableOpacity>
</View>
:
<View>
<TouchableOpacity
onPress= {() => this.example()}>
<Text>
hide view
</Text>
</TouchableOpacity>
</View>
}
其他回答
实际上，在iOS开发中，通过react-native，当我使用display: 'none'或如下所示:
const styles = StyleSheet.create({
disappearImage: {
width: 0,
height: 0
}
});
iOS不加载任何其他的图像组件，如onLoad或等，所以我决定使用如下:
const styles = StyleSheet.create({
disappearImage: {
width: 1,
height: 1,
position: 'absolute',
top: -9000,
opacity: 0
}
});
非常容易。只需更改为()=> this.showCancel()，如下所示:
<TextInput
onFocus={() => this.showCancel() }
onChangeText={(text) => this.doSearch({input: text})} />
<TouchableHighlight
onPress={this.hideCancel()}>
<View>
<Text style={styles.cancelButtonText}>Cancel</Text>
</View>
</TouchableHighlight>
在render()中，你可以有条件地显示JSX或返回null，如下:
render(){
return({yourCondition ? <yourComponent /> : null});
}
我会这样做:
var myComponent = React.createComponent({
getInitialState: function () {
return {
showCancel: false,
};
},
toggleCancel: function () {
this.setState({
showCancel: !this.state.showCancel
});
}
_renderCancel: function () {
if (this.state.showCancel) {
return (
<TouchableHighlight
onPress={this.toggleCancel()}>
<View>
<Text style={styles.cancelButtonText}>Cancel</Text>
</View>
</TouchableHighlight>
);
} else {
return null;
}
},
render: function () {
return (
<TextInput
onFocus={this.toggleCancel()}
onChangeText={(text) => this.doSearch({input: text})} />
{this._renderCancel()}
);
}
});
下面的例子是用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>
......
}
