版权声明:原创文章,未经允许不得转载!!! https://blog.csdn.net/halo1416/article/details/82769062
问题描述:在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 中是一样的):
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!