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

);
}

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

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

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

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

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

然后有一个按钮

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

然后，在return语句中

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

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

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

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