我对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中。 此外，我如何从一开始就隐藏按钮?
当前回答
我们现在有钩子，所以我建议重新格式化。使用钩子打开/关闭组件。
const [modalVisible, setModalVisible] = setState(false);
然后有一个按钮
<Button title="Press Me" onPress={() => {
setModalVisible(true);
}}
然后，在return语句中
return(
<View>
{modalVisible &&
Insert modal code in here.
}
</View>
)
其他回答
我也有同样的问题，我想要显示/隐藏视图，但我真的不希望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;
我们现在有钩子，所以我建议重新格式化。使用钩子打开/关闭组件。
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来显示/隐藏组件。
隐藏并显示活动指示器的父视图
constructor(props) {
super(props)
this.state = {
isHidden: false
}
}
像跟着一样隐藏和显示
{
this.state.isHidden ? <View style={style.activityContainer} hide={false}><ActivityIndicator size="small" color="#00ff00" animating={true}/></View> : null
}
全部参考
render() {
return (
<View style={style.mainViewStyle}>
<View style={style.signinStyle}>
<TextField placeholder='First Name' keyboardType='default' onChangeFirstName={(text) => this.setState({firstName: text.text})}/>
<TextField placeholder='Last Name' keyboardType='default' onChangeFirstName={(text) => this.setState({lastName: text.text})}/>
<TextField placeholder='Email' keyboardType='email-address' onChangeFirstName={(text) => this.setState({email: text.text})}/>
<TextField placeholder='Phone Number' keyboardType='phone-pad' onChangeFirstName={(text) => this.setState({phone: text.text})}/>
<TextField placeholder='Password' secureTextEntry={true} keyboardType='default' onChangeFirstName={(text) => this.setState({password: text.text})}/>
<Button style={AppStyleSheet.buttonStyle} title='Sign up' onPress={() => this.onSignupPress()} color='red' backgroundColor='black'/>
</View>
{
this.state.isHidden ? <View style={style.activityContainer}><ActivityIndicator size="small" color="#00ff00" animating={true}/></View> : null
}
</View>
);
}
在按钮上按下设置状态如下所示
onSignupPress() {
this.setState({isHidden: true})
}
当你需要躲藏的时候
this.setState({isHidden: false})
如果你想隐藏它，但保持空间被组件占用，如css的可见性:隐藏设置在组件的样式不透明度:0应该做的技巧。
由于可能与不可见项交互，可能需要禁用该功能的其他步骤，这取决于组件。
