我对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中。 此外，我如何从一开始就隐藏按钮?
当前回答
只是简单地使用这个，因为我想使用“useRef”条件对我来说不是一个选项。当你想使用useRef钩子并按下按钮时，你可以使用这个假设。
<Button
ref={uploadbtn}
buttonStyle={{ width: 0, height: 0, opacity: 0, display: "none" }}
onPress={pickImage}
/>
其他回答
我需要在两幅图像之间切换。在它们之间进行条件切换时，有5秒的延迟，没有图像显示。
我使用的方法来自被否决的amos答案。因为很难用适当的格式将代码放入注释中。
显示功能:
<View style={styles.logoWrapper}>
<Image
style={[styles.logo, loading ? styles.hidden : {}]}
source={require('./logo.png')} />
<Image
style={[styles.logo, loading ? {} : styles.hidden]}
source={require('./logo_spin.gif')} />
</View>
风格:
var styles = StyleSheet.create({
logo: {
width: 200,
height: 200,
},
hidden: {
width: 0,
height: 0,
},
});
我是这样解决这个问题的:
<视图样式={{display: stateLoad ?'none': undefined}} />
大多数时候我是这样做的:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {isHidden: false};
this.onPress = this.onPress.bind(this);
}
onPress() {
this.setState({isHidden: !this.state.isHidden})
}
render() {
return (
<View style={styles.myStyle}>
{this.state.isHidden ? <ToHideAndShowComponent/> : null}
<Button title={this.state.isHidden ? "SHOW" : "HIDE"} onPress={this.onPress} />
</View>
);
}
}
如果你是编程新手，这一行对你来说一定很陌生:
{this.state.isHidden ? <ToHideAndShowComponent/> : null}
这条线等于
if (this.state.isHidden)
{
return ( <ToHideAndShowComponent/> );
}
else
{
return null;
}
但是你不能在JSX内容中编写if/else条件(例如渲染函数的return()部分)，所以你必须使用这种符号。
这个小技巧在很多情况下都非常有用，我建议你在开发中使用它，因为你可以快速检查条件。
问候,
编辑:对于更直接的语法，您可以执行{this.state。isHidden && <ToHideAndShowComponent/>}。这里，左操作数在右操作数之前求值，因此如果isHidden为false，则该组件将不显示。
你可以使用我的模块react-native-display来显示/隐藏组件。
我会这样做:
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()}
);
}
});
