在react native中显示或隐藏组件的唯一方法是检查应用程序状态的参数值，如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;

如果你想隐藏它，但保持空间被组件占用，如css的可见性:隐藏设置在组件的样式不透明度:0应该做的技巧。

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

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

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

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

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

1. 使用展示道具

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

2. 使用有风格的显示道具

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

3.限制呈现

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

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

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

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

1. 使用展示道具

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

2. 使用有风格的显示道具

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

3.限制呈现

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

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

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

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

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

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

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

与前面的一些建议不同，这将从视图中隐藏组件，但也将呈现它(将它保存在DOM中)，从而使它真正不可见。

你可以使用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操作的快速而有效的方法。