我对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中。 此外，我如何从一开始就隐藏按钮?
当前回答
我也有同样的问题，我想要显示/隐藏视图，但我真的不希望UI在添加/删除东西或必须处理重新渲染时跳来跳去。
我写了一个简单的组件来处理它。默认为动画，但易于切换。我把它放在GitHub和NPM上，但所有的代码都在下面。
NPM install——save react-native- hidden -view
import React, { Component, PropTypes } from 'react';
import { Animated } from 'react-native';
class HideableView extends Component {
constructor(props) {
super(props);
this.state = {
opacity: new Animated.Value(this.props.visible ? 1 : 0)
}
}
animate(show) {
const duration = this.props.duration ? parseInt(this.props.duration) : 500;
Animated.timing(
this.state.opacity, {
toValue: show ? 1 : 0,
duration: !this.props.noAnimation ? duration : 0
}
).start();
}
shouldComponentUpdate(nextProps) {
return this.props.visible !== nextProps.visible;
}
componentWillUpdate(nextProps, nextState) {
if (this.props.visible !== nextProps.visible) {
this.animate(nextProps.visible);
}
}
render() {
if (this.props.removeWhenHidden) {
return (this.visible && this.props.children);
}
return (
<Animated.View style={{opacity: this.state.opacity}}>
{this.props.children}
</Animated.View>
)
}
}
HideableView.propTypes = {
visible: PropTypes.bool.isRequired,
duration: PropTypes.number,
removeWhenHidden: PropTypes.bool,
noAnimation: PropTypes.bool
}
export default HideableView;
其他回答
另一个选项是通过样式应用绝对定位，将隐藏组件设置为屏幕外坐标:
<TextInput
onFocus={this.showCancel()}
onChangeText={(text) => this.doSearch({input: text})}
style={this.state.hide ? {position: 'absolute', top: -200} : {}}
/>
与前面的一些建议不同，这将从视图中隐藏组件，但也将呈现它(将它保存在DOM中)，从而使它真正不可见。
我们现在有钩子，所以我建议重新格式化。使用钩子打开/关闭组件。
const [modalVisible, setModalVisible] = setState(false);
然后有一个按钮
<Button title="Press Me" onPress={() => {
setModalVisible(true);
}}
然后，在return语句中
return(
<View>
{modalVisible &&
Insert modal code in here.
}
</View>
)
你可以使用我的模块react-native-display来显示/隐藏组件。
在render()中，你可以有条件地显示JSX或返回null，如下:
render(){
return({yourCondition ? <yourComponent /> : null});
}
只使用
style={ width:0, height:0 } // to hide
