React nativede的笔记-优快云博客

本文详细介绍了React Native中的基本布局概念，包括主轴和侧轴的定义、flex布局的使用方法，以及justifyContent、alignItems等属性的具体作用。通过实例演示了如何在React Native中实现不同类型的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webstorn的激活码

http://blog.youkuaiyun.com/it_talk/article/details/52448597

React Native 异常处理

https://hacpai.com/article/1497235254333

Android Studio出现Failed to open zip file问题的解决方法

http://www.jcodecraeer.com/a/anzhuokaifa/Android_Studio/2017/0317/7691.html 中选择第二种方法

第一次应用程序

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
//React是默认组件 非默认组件需要加{}
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

// 什么时候用{}，包装对象的时候使用{}
// 什么时候用{}，表达式需要用{}
// 什么时候用{}，变量需要用{}
// 什么时候使用（），包装组件标签的时候，必须使用（）

//自定义，程序的入口组件
class reactNativeDemo extends Component {
    /*系统默认调用该方法，当一个组件要显示的时候，就会自动调用该方法
      render(){


      }
    */

    render(){

      var str = 'gogogogo'
      return(
          <View style={styles.mainViewStyle}>

            <Text>{str}</Text>


          </View>

      )

    }


}

//样式表，定义变量用var
var styles = StyleSheet.create({
    mainViewStyle : {
      //占据全屏
      flex:1,
      backgroundColor : 'red'

    }

})

//注册程序入口组件
//第一个参数：模块名称，随意填，与IOS的模块名称一一对应
//第二个参数：函数，箭头函数 ES6
//箭头函数 => 左边：函数参数 ，右边，函数返回值
AppRegistry.registerComponent('reactNativeDemo', () => reactNativeDemo);

margin:外间距：如果是第一次子空间，参照父空间位置。如果不是第一个子空间，参照上一个

注意：margin可能与width，height冲突

注意：当设置了尺寸：宽度，高度，marginBottom，marginRight，可能无效，marginLeft，marginTop肯定有效

padding,内边距：相对自身内容移动的距离

绝对定位：参照父控件

相对定位：参照控件本身

CSS：控制一个子控制器的时候

如果一个控件中有很多个子控件用flex

Flex主轴和侧轴

Flex中有两个主要的概念：主轴和侧轴
主轴与侧轴的关系：相互垂直的。
主轴：决定容器中子组件默认的布局方向：水平，垂直
侧轴：决定容器中子组件与主轴垂直的布局方向
- 比如主轴水平，那么子组件默认就是水平布局排布，侧轴就是控制子组件在垂直方向的布局

flexDirection属性

flexDirection:决定主轴的方向，水平或者垂直，这样子组件就会水平排布或者垂直排布
flexDirection共有四个值，在RN中默认为column。

row（默认值）：主轴为水平方向，从左向右。依次排列
row-reverse：主轴为水平方向，从右向左依次排列
column：主轴为垂直方向，默认的排列方式，从上向下排列
column-reverse：主轴为垂直方向，从下向上排列

flexWrap属性

flexWrap:决定子控件在父视图内是否允许多行排列。
flexWrap共有两个值，默认为nowrap。

nowrap 组件只排列在一行上，可能导致溢出。
wrap   组件在一行排列不下时，就进行多行排列

justifyContent属性

justifyContent:决定子组件在主轴中具体布局，是靠左，还是居中等
justifyContent共有五个值，默认为flex-start

flex-start: 子组件向主轴起点对齐，如果主轴水平，从左开始，主轴垂直，从上开始。
flex-end 子组件向主轴终点对齐，如果主轴水平，从右开始，主轴垂直，从下开始。
center 居中显示，注意：并不是让某一个子组件居中，而是整体有居中效果
space-between 均匀分配,相邻元素间距离相同。每行第一个组件与行首对齐，每行最后一个组件与行尾对齐。
space-around 均匀分配,相邻元素间距离相同。每行第一个组件到行首的距离和每行最后一个组件到行尾的距离将会是相邻元素之间距离的一半

作者：袁峥
链接：http://www.jianshu.com/p/cc2e517ef23b
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

alignItems属性

alignItems:决定子组件在测轴中具体布局
- 一直都没有管过侧轴，如果侧轴垂直，决定子组件在上，还是下，或者居中
alignItems共有四个值，默认为stretch。

flex-start 子组件向侧轴起点对齐。
flex-end 子组件向侧轴终点对齐。
center 子组件在侧轴居中。
stretch 子组件在侧轴方向被拉伸到与容器相同的高度或宽度。

alignSelf属性

alignSelf:自定义自己的侧轴布局，用于一个子组件设置。
- 注意：当某个子组件不想参照默认的alignItems时，可以设置alignSelf，自定义自己的侧轴布局。
alignSelf共有五个值，默认为auto。

auto 继承它的父容器的alignItems属性。如果没有父容器则为 "stretch"
flex-start 子组件向侧轴起点对齐。
flex-end 子组件向侧轴终点对齐。
center 子组件在侧轴居中。
stretch 子组件在侧轴方向被拉伸到与容器相同的高度或宽度。

flex属性

flex: 决定子控件在主轴中占据几等分。
flex: 任意数字，所有子控件flex相加，自己flex占总共多少，就有多少宽度.

转载于:https://www.cnblogs.com/520ljw/p/7422333.html