显示\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>
}

隐藏并显示活动指示器的父视图

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

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

非常容易。只需更改为()=> 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>

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

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

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

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

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