我对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中。 此外，我如何从一开始就隐藏按钮?
当前回答
checkincheckout = () => {
this.setState({ visible: !this.state.visible })
}
render() {
return (
{this.state.visible == false ?
<View style={{ alignItems: 'center', flexDirection: 'row', marginTop: 50 }}>
<View style={{ flex: 1, alignItems: 'center', flexDirection: 'column' }}>
<TouchableOpacity onPress={() => this.checkincheckout()}>
<Text style={{ color: 'white' }}>Click to Check in</Text>
</TouchableOpacity>
</View>
</View>
:
<View style={{ alignItems: 'center', flexDirection: 'row', marginTop: 50 }}>
<View style={{ flex: 1, alignItems: 'center', flexDirection: 'column' }}>
<TouchableOpacity onPress={() => this.checkincheckout()}>
<Text style={{ color: 'white' }}>Click to Check out</Text>
</TouchableOpacity>
</View>
</View>
}
);
}
这一切。享受你的编码……
其他回答
我是这样解决这个问题的:
<视图样式={{display: stateLoad ?'none': undefined}} />
我会这样做:
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()}
);
}
});
在你的渲染函数中:
{ this.state.showTheThing &&
<TextInput/>
}
然后就这样做:
this.setState({showTheThing: true}) // to show it
this.setState({showTheThing: false}) // to hide it
大多数时候我是这样做的:
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，则该组件将不显示。
// You can use a state to control wether the component is showing or not
const [show, setShow] = useState(false); // By default won't show
// In return(
{
show && <ComponentName />
}
/* Use this to toggle the state, this could be in a function in the
main javascript or could be triggered by an onPress */
show == true ? setShow(false) : setShow(true)
// Example:
const triggerComponent = () => {
show == true ? setShow(false) : setShow(true)
}
// Or
<SomeComponent onPress={() => {show == true ? setShow(false) : setShow(true)}}/>
