import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; export default class AlignItemsBasics extends Component { render() { return ( // 尝试把`alignItems`改为`flex-start`看看 // 尝试把`justifyContent`改为`flex-end`看看 // 尝试把`flexDirection`改为`row`看看 <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'stretch', }}> <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', }}> <View style={{ 50, height: 50, backgroundColor: 'red'}} /> <View style={{ 50,height: 50, backgroundColor: 'blue'}} /> <View style={{ 50,height: 100, backgroundColor: 'black'}} /> </View> </View> ); } };
一个横向排列,一个竖向排列,子视图居中 https://reactnative.cn/docs/flexbox/
alignItems子视图对齐方式,例如:视图内容横向排列,则是标识竖向对齐方式
同一子视图的flex都设定值的话,子视图的宽高大小将按照此比例分配,不说明宽高情况下为auto自适应宽高
https://blog.csdn.net/u011468619/article/details/72781959 创建页面并绑定跳转
https://reactnative.cn/docs/using-a-listview/ 列表的书写FlatList SectionList
https://reactnative.cn/docs/network/ Fetch进行同步或异步网络请求上传等操作
https://www.jianshu.com/p/4c81995746ea 导航跳转相关