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

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

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

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

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

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

这个任务背后的想法是创建一个名为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;

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

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

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

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

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

只使用

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