React Native 中如何实现根据state控制组件的显示与隐藏？

Question

如题，测试发现不支持visible属性... opacity也满足不了

Answer 1

render() {

    return(

                    {
                       this.state.abc == null ? (
                            null
                        ) : (
                            <View>
                                //部位空时想要显示的内容
                            <View>
                        )
                    }


    )


}

rn中显示和隐藏是根据state状态值判断重新渲染，切勿用web端思维去想这个问题，opacity只是透明度，位置元素都还在，只是看不见而已，有区别

Answer 2

方法1: 在render中根据条件是否渲染组建 {condition==true?<View/>:null};
方法2: 就像网页开发一样 父容器 overflow:"hidden" 子组件隐藏 left:-999;position:absolute;

Answer 3

• 在constructor初始化state
• 根据事件调整state

一个简单示例:

'use strict';
import React, { Component } from 'react';
import { View, Text, TouchableOpacity, SafeAreaView } from 'react-native';

export default class Sample extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false,
        }
    }

    // 按压控制显示/隐藏菜单
    _onPressListItem() {
        this.setState((previousState) => {
            return ({
                show: !previousState.show,
            })
        });
    }

    render() {
        let v = this.state.show ? <Text>待显示的内容</Text> : null;    // 菜单
        return (
            <SafeAreaView>
                <TouchableOpacity onPress={() => this._onPressListItem()}>
                    <View>
                        <Text>点我</Text>
                    </View>
                </TouchableOpacity>
                {v}
            </SafeAreaView>
        )
    }
};

效果

点击文字

参考链接:
参考链接

Answer 4

安利条件渲染库:

rn-visible-view

Answer 5

最后的那个答案非常赞，顶