react-native 返回组件的问题

问题描述：在react-native中，我们开发一个组件时最终返回的内容一般都是一个 View 或者 Content 组件，其余的内容都包裹在这个组件中进行返回。直接来说，我们最终只相当于返回的一个 View 或者 Content 组件！！如下图：

代码：

export class Demo extends Component {

    constructor() {
        super();
        this.state = {
            
        };
    }

    render() {
        return (
            <Container>
                <HeaderDark>
                    <Left>
                        <HeaderBack navigation={this.props.navigation}/>
                    </Left>
                    <Body>
                    <HeaderCaption>整改详情</HeaderCaption>
                    </Body>
                    <Right></Right>
                </HeaderDark>

                <Content contentContainerStyle={{flex: 1,justifyContent: 'flex-start',alignItems: 'stretch',overflow: 'hidden',
                    backgroundColor: '#fff',borderRadius: 8,marginHorizontal:19,marginBottom: 19, padding:16,}}>
                    <Text>内容1</Text>
                    <Text>内容2</Text>
                    <Text>内容3</Text>
                    <Text>内容4</Text>
                    <Text>内容5</Text>
                </Content>
            </Container>
        );
     }

}

效果：

但是：如果需要同时返回几个 View 或者 Content 时，该怎么办呢？

方法1：在几个 View 的最外面再包裹一个总的 View，如下图：

方法2：return返回一个数组，数组元素为单个的 View 或者 Content组件，如下图：

注意：1. 这种方法和方法1 在原理上其实是一个的，最终都是放回一个 Container 组件。

2. 这种方式不能用在 render 中，只能用在函数中返回组件的情况。

renderCon 函数：

效果如下（和直接写在 render 中是一样的）：

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

react-native 返回组件的问题

猜你喜欢