在react native中隐藏/显示组件

我对React Native真的很陌生，我想知道如何隐藏/显示组件。< br / > 下面是我的测试用例:

<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/hideCancel中隐藏/显示它。< br / > 此外，我如何从一开始就隐藏按钮?< / p >

380197 次浏览
小开
最佳答案

我会这样做:

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.showCancel()，如下所示:

<TextInput
onFocus={() => this.showCancel() }
onChangeText={(text) => this.doSearch({input: text})} />


<TouchableHighlight
onPress={this.hideCancel()}>
<View>
<Text style={styles.cancelButtonText}>Cancel</Text>
</View>
</TouchableHighlight>
小开

只使用

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

在react或react native中，组件隐藏/显示或添加/删除的方式不像android或iOS中那样工作。我们大多数人都认为会有类似的策略

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

但反应的方式是完全不同的。实现这种功能的唯一方法是将组件包含在DOM中或从DOM中删除。

在这个例子中，我将根据单击按钮来设置文本视图的可见性。

enter image description here

这个任务背后的想法是创建一个名为state的状态变量，在按钮单击事件发生时将初始值设置为false，然后它的值切换。现在我们将在创建组件时使用这个状态变量。

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;
小开

我需要在两幅图像之间切换。在它们之间进行条件切换时，有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,
},
});

screencast

小开

在你的渲染函数中:

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

然后就这样做:

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

在render()中，你可以有条件地显示JSX或返回null，如下:

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

我也有同样的问题，我想要显示/隐藏视图，但我真的不希望UI在添加/删除东西或必须处理重新渲染时跳来跳去。

我写了一个简单的组件来处理它。默认为动画，但易于切换。我把它放在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;
小开

另一个选项是应用通过造型的绝对定位，将隐藏组件设置为屏幕外坐标:

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

与之前的一些建议不同，这将隐藏你的组件，但也会呈现它(将它保存在DOM中)，从而使它真正地看不见的。

小开

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

小开

大多数时候我是这样做的:

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为假，则该组件将不会显示。

小开

如果你需要组件保持加载但隐藏，你可以将不透明度设置为0。(例如，我需要这个世博会相机)

//in constructor
this.state = {opacity: 100}


/in component
style = \{\{opacity: this.state.opacity}}


//when you want to hide
this.setState({opacity: 0})
小开

enter image description here

隐藏和显示 Activity Indicator的父视图

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对我来说就足够了

constructor(props) {
super(props);
this.state = {
visibleStatus: false
};
}
updateStatusOfVisibility () {
this.setStatus({
visibleStatus: true
});
}
hideCancel() {
this.setStatus({visibleStatus: false});
}


render(){
return(
<View>
<TextInput
onFocus={this.showCancel()}
onChangeText={(text) => {this.doSearch({input: text}); this.updateStatusOfVisibility()}} />


<TouchableHighlight style={this.state.visibleStatus ? null : { display: "none" }}
onPress={this.hideCancel()}>
<View>
<Text style={styles.cancelButtonText}>Cancel</Text>
</View>
</TouchableHighlight>
</View>)
}
小开
React Native的布局有display属性支持，类似于CSS。 可选值:none和flex(默认值)。 https://facebook.github.io/react-native/docs/layout-props#display < / p > 
<View style=\{\{display: 'none'}}> </View>
小开

实际上，在iOS开发中通过react-native，当我使用display: 'none'或如下所示:

const styles = StyleSheet.create({
disappearImage: {
width: 0,
height: 0
}
});

iOS不加载任何其他的Image组件，如onLoad或等，所以我决定使用如下:

const styles = StyleSheet.create({
disappearImage: {
width: 1,
height: 1,
position: 'absolute',
top: -9000,
opacity: 0
}
});
小开

在react native中显示或隐藏组件的唯一方法是检查app状态参数的值，如state或props。我提供了一个完整的例子如下:

import React, {Component} from 'react';
import {View,Text,TextInput,TouchableHighlight} from 'react-native'


class App extends Component {


constructor(props){
super(props);
this.state={
show:false
}
}


showCancel=()=>{
this.setState({show:true})
};


hideCancel=()=>{
this.setState({show:false})
};


renderTouchableHighlight(){
if(this.state.show){
return(
<TouchableHighlight
style=\{\{borderColor:'black',borderWidth:1,marginTop:20}}
onPress={this.hideCancel}>
<View>
<Text>Cancel</Text>
</View>
</TouchableHighlight>
)
}
return null;
}


render() {




return (
<View style=\{\{justifyContent:'center',alignItems:'center',flex:1}}>
<TextInput
style=\{\{borderColor:'black',borderBottomWidth:1}}
onFocus={this.showCancel}
/>
{this.renderTouchableHighlight()}


</View>
);
}
}


export default App;

Here is the result

小开 
constructor(props) {
super(props);
this.state = {
visible: true,
}
}

声明visible为false，默认情况下模式/视图是隐藏的

示例= ()=> {

 this.setState({ visible: !this.state.visible })

｝

函数调用**

{this.state.visible == false ?
<View>
<TouchableOpacity
onPress= {() => this.example()}>   // call function
<Text>
show view
</Text>
</TouchableOpacity>


</View>
:
<View>
<TouchableOpacity
onPress= {() => this.example()}>
<Text>
hide view
</Text>
</TouchableOpacity>
</View>
}
小开

如果你想隐藏它，但保持空间被组件占用，就像css在组件样式中的visibility: hidden设置一样，opacity: 0应该可以做到。

由于可能与不可见项交互，可能需要禁用该功能的其他步骤，这取决于组件。

小开

下面的例子是用Hooks在typescript中编码。

import React, { useState, useEffect } from "react";


........


const App = () => {


const [showScrollView, setShowScrollView] = useState(false);


......


const onPress = () => {
// toggle true or false
setShowScrollView(!showScrollView);
}


......


</MapboxGL.ShapeSource>
<View>{showScrollView ? (<DetailsScrollView />) : null}</View>
</MapboxGL.MapView>
......


}
小开 
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>
}


);
}

这一切。享受你的编码……

小开 
// 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)}}/>
小开

您可以使用这些条件来显示和隐藏组件

constructor(){


super();


this.state ={


isVisible:true


}
}


ToggleFunction = () => {


this.setState(state => ({


isVisible: !state.isVisible


}));


};


render() {
  

return (


<View style={styles.MainContainer}>


{


this.state.isVisible ? <Text style= \{\{ fontSize: 20, color: "red", textAlign: 'center' }}> Hello World! </Text> : null
}


<Button title="Toggle Visibility" onPress={this.ToggleFunction} />


</View>
);
}
小开

如果你不想从你的页面中删除组件，比如隐藏一个WebView，我可以保证使用opaque方法。

<WebView
style=\{\{opacity: 0}} // Hide component
source=\{\{uri: 'https://www.google.com/'}}
/>

如果你需要向第三方网站提交表单，这是很有用的。

小开

我是这样解决这个问题的:

<View style=\{\{ display: stateLoad ? 'none' : undefined }} />

小开

只是简单地使用这个，因为我想使用“;useRef"条件不是我的选择。当你想使用useRef钩子并按下按钮时，你可以使用这个假设。

   <Button
ref={uploadbtn}
buttonStyle=\{\{ width: 0, height: 0, opacity: 0, display: "none" }}
onPress={pickImage}
/>
小开

显示\hide组件的三种方法:

——类组件 : / ------------------------------------------------------------------------------------------------------------

在我使用的所有例子中，如下所示:

.
...
constructor(props) {
super(props);
this.state = {showComponent: true};
}

1. 使用display prop

<View display={this.state.showComponent ? 'flex' : 'none'} />

2. 使用display prop和style

<View style=\{\{display:this.state.showComponent ? 'flex' : 'none'}} />

3.限制呈现

{
this.state.showComponent &&
<View /> // Or <View> ... </View>
}

——功能组件 :/ ------------------------------------------------------------------------------------------------------------

在我使用的所有例子中，如下所示:

const [showComponent, setShowComponent] = useState(true);

1. 使用display prop

<View display={showComponent ? 'flex' : 'none'} />

2. 使用display prop和style

<View style=\{\{showComponent  ? 'flex' : 'none'}} />

3.限制呈现

{
showComponent &&
<View /> // Or <View> ... </View>
}
小开

我们现在有钩子，所以我建议重新格式化。使用钩子打开/关闭组件。

const [modalVisible, setModalVisible] = setState(false);

然后有一个按钮

<Button title="Press Me" onPress={() => {
setModalVisible(true);
}}

然后，在return语句中

return(
<View>
{modalVisible &&
Insert modal code in here.
}
</View>
)
小开

我通常用这样的东西

const [showComponent, setShowComponent] = useState(false)
return(
<div>
{showComponent && (<Text>Hello</Text>)}
<Button onPress={() => {setShowComponent(true)}}>Click me</Button>
</div>
)

一旦按下按钮，它就会显示“Hello”。这被称为条件渲染。你可以参考w3schools来了解条件呈现。

小开

你可以使用useState Hook来实现

The useState basically, is a feature which helps us preserve the values of variables even after multiple re-renders.

它充当本地状态管理工具，用于在组件呈现或重新呈现后存储值。

除此之外，你还可以通过改变状态变量的值来触发它来更新UI。

const [show,setShow] = useState(true)

这里我们解构了useState发送的值，第一个是变量，通过它我们可以得到值，第二个是一个函数，通过它我们可以更新状态变量的值。

所以，在你的情况下-

import React, {useState} from 'react';
import { Text, View, StyleSheet,Button } from 'react-native';
import Constants from 'expo-constants';


export default function App() {
const [show,setShow] = useState(true)
return (
<View style={styles.container}>
{show && <Text style={styles.paragraph}>
Showing and Hiding using useState
</Text>}
<Button
title="Press me"
onPress={() => {setShow(!show)}}
/>
</View>
);
}


const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});

在本例中，在Button press上，我们将状态变量从true切换为false。

您可以使用布尔条件显示或隐藏JSX Code，我们在这条语句中就是这样做的。

{show && <Text style={styles.paragraph}>
Showing and Hiding using useState
</Text>}

这是一种将状态用于UI操作的快速而有效的方法。


提交答案