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

Z时代
2024-01-10
分类：技术分享

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

回答

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

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

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

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