隐藏/显示反应原生组件

我对React Native非常陌生，我想知道如何隐藏/显示组件。
这是我的testing用例：

<TextInput onFocus={this.showCancel()} onChangeText={(text) => this.doSearch({input: text})} /> <TouchableHighlight onPress={this.hideCancel()}> <View> <Text style={styles.cancelButtonText}>Cancel</Text> </View> </TouchableHighlight> 

我有一个TextInput组件，我想要的是当input获得焦点时显示TouchableHighlight ，然后在用户按下取消button时隐藏TouchableHighlight 。

我不知道如何“访问” TouchableHighlight组件，以隐藏/显示在我的函数showCancel/hideCancel 。
另外，我怎样才能从一开始就隐藏button？

Answer 1

我会做这样的事情：

 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()} ); } }); 

Answer 2

在你的渲染函数中：

 { this.state.showTheThing && <TextInput/> } 

然后只是做：

 this.setState({showTheThing: true}) // to show it this.setState({showTheThing: false}) // to hide it 

Answer 3

在反应或反应本机组件隐藏/显示或添加/删除的方式不像在Android或iOS中的工作。 我们大多数人认为会有类似的策略

 View.hide = true or parentView.addSubView(childView) 

但是，回答土着工作的方式则完全不同。 实现这种function的唯一方法是将您的组件包含在DOM中或从DOM中删除。

在这个例子中，我将根据点击button设置文本视图的可见性。

这个任务背后的想法是创build一个状态variables称为状态，当button点击事件发生时，初始值设置为false，然后值切换。 现在我们将在创build组件的过程中使用这个状态variables。

 import renderIf from './renderIf' class FetchSample extends Component { constructor(){ super(); this.state ={ status:false } } toggleStatus(){ this.setState({ status:!this.state.status }); console.log('toggle button handler: '+ this.state.status); } render() { return ( <View style={styles.container}> {renderIf(this.state.status)( <Text style={styles.welcome}> I am dynamic text View </Text> )} <TouchableHighlight onPress={()=>this.toggleStatus()}> <Text> touchme </Text> </TouchableHighlight> </View> ); } } 

在这个片段中唯一需要注意的是renderIf ，它实际上是一个函数，它会根据传递给它的布尔值返回传递给它的组件。

 renderIf(predicate)(element) 

renderif.js

 'use strict'; const isFunction = input => typeof input === 'function'; export default predicate => elemOrThunk => predicate ? (isFunction(elemOrThunk) ? elemOrThunk() : elemOrThunk) : null; 

Answer 4

在render（）中，可以有条件地显示JSX或返回null，如下所示：

 render(){ return({yourCondition ? <yourComponent /> : null} } 

Answer 5

我需要在两个图像之间切换。 在它们之间进行有条件的切换时，有5秒的延迟，没有显示图像。

我正在使用从downvoted阿莫斯答案的方法。 作为新的答案发布，因为很难通过正确的格式将代码放入注释中。

渲染function：

 <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, }, }); 

Answer 6

只是使用

 style={ width:0, height:0 } // to hide 

Answer 7

另一个选项是通过样式应用绝对定位 ，将隐藏的组件设置在屏幕外的坐标中：

 <TextInput onFocus={this.showCancel()} onChangeText={(text) => this.doSearch({input: text})} style={this.state.hide ? {position: 'absolute', top: -200} : {}} /> 

与以前的一些build议不同的是，这会隐藏你的组件，但也会渲染它（保留在DOM中），从而使它真正不可见 。

Answer 8

我有同样的问题，我想要显示/隐藏视图，但我真的不希望用户界面跳动，当事情被添加/删除或必然处理重新渲染。

我写了一个简单的组件来处理它。 默认情况下为animation，但易于切换。 我用自述文件将它放在GitHub和NPM上，但所有的代码都在下面。

npm install --save react-native-hideable-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; 

Answer 9

您可以使用我的模块react-native-display来显示/隐藏组件。

Answer 10

好简单。 只需要改成（）=> 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>