第一章 flexbox 布局

1.flexDirection:'row', 水平 flexDirection:'column',垂直

需要在父元素上设置这种属性才能实现flex. flex:1 会撑满整个屏幕.

demo:如果一行有3格,则所有的flex:1 ,这样会平分width;

在flexbox中一般view不用设置固定的高度,都是以子元素撑开父元素,设置相应的margin padding  之类的属性值 .

2.flexbox   中的width 与height  是没有单位的  一般格式是 height: 20,  单位是手机根据屏幕自己改变的,跟rem有点相似.

3.在react native  布局中,样式的引入是以数组的形式引入的.

<Text style={[styles.navtext,styles.navtext]} onPress={() => navigator.push({name:'Index'})}>活动</Text>

4. 页面的横竖屏切换,出现滚动条,需要运用<scrollview>这个属性

5. 主页面需要引入代码中用到的相关组件与标签

import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
Navigator,
AppRegistry,
} from 'react-native';

 第二章 component

1. 可以将其中的一些<view> 以component拆开,让后以标签的形式引入组件

组件的输出
export default class NavComponent extends Component
export default = 'NavComponent'

元素的导入
import NavComponent from .... 

<NavComponent/>

2.<Navigator/> 标签是包括<view/>  这些标签的,不可以用component  的方式引入.

3.<ListView/> 属性,这个属性不会立即渲染页面,跟前前端的瀑布流相似,不同之处在于滚动条上端隐藏的页面会被自动切除,而不是隐藏.

第三章  props  与 state

1.props  是相关的属性值,比如<Img/> 标签的值,属性是不可以改变的.

2.state 表示数据,是可以改变的,store  是数据库,存储state.

3. 对于component,是需要初始化数据的,也就是state,其中super() 是 写的,初始化系统的数据;

如果在component 外,则不需要这行代码,会报错.

class Blink extends Component {
constructor(props) {
super(props);
this.state = { showText: true };

4.引入一个本地的json  文件,需要的就是props ,初始化数据,然后在渲染到页面中.

先用props 初始化数据:

 constructor(props) {
super(props);

然后就是定义数据

<Header data={twitter[0].user}/>
  

之后header   标签中可以直接用 this.props.data. ...直接调用

<View style={[styles.row,styles.head]}>
<Image source={{uri:this.props.data.avatar}} style={{width: 40, height: 40}}/>
<View style={styles.headtext}>
<Text style={[styles.react,styles.textColor]}>{this.props.data.name} </Text>
<Text style={styles.reactjs}>@{this.props.data.handler}</Text>
</View>
<Image source={require('./icons/settings.png')} style={{width: 20, height: 20,}}/>
<Button />
</View>

react native 之页面布局的更多相关文章

  1. 从零学React Native之06flexbox布局

    前面我们接触了好多React Native代码, 并没有介绍RN中的组件具体是如何布局的,这一篇文章,重点介绍下flexbox布局. 什么是flexbox布局 React中引入了flexbox概念,f ...

  2. React Native知识1-FlexBox 布局内容

    一:理论知识点 1:什么是FlexBox布局? 弹性盒模型(The Flexible Box Module),又叫Flexbox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其 ...

  3. React Native 系列(四) -- 布局

    前言 本系列是基于React Native版本号0.44.3写的.RN支持CSS中的布局属性,因此可以使用CSS布局属性,这里就不详细地讲解了,这篇文章的重点主要是讲述一下RN中的Flex布局. CS ...

  4. React Native之FlexBox布局

    参考原文链接:https://www.cnblogs.com/wujy/p/5841685.html 弹性盒模型(The Flexible Box Module),又叫Flexbox,意为“弹性布局” ...

  5. react native 之页面跳转

    第一章  跳转的实现 1.component  中添加这行代码 <View style={styles.loginmain}> <Text style={styles.loginte ...

  6. 混合开发的大趋势之一React Native之页面跳转

    转载请注明出处:王亟亟的大牛之路 最近事情有点多,没有长时间地连贯学习,文章也停了一个多礼拜,愧疚,有时间还是继续学习,继续写! 还是先安利:https://github.com/ddwhan0123 ...

  7. 混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码

    转载请注明出处:这里写链接内容 今天是10月份的最后一天,我加了3个月来的第一个班,挤出了这篇. 废话不多先安利,然后继续学习 RN 有好东西都往里面丢,努力做好归纳 https://github.c ...

  8. React Native,flexbox布局

    Flexbox布局 flex:使组件在可利用的空间内动态地扩张或收缩.flex:1会使组件撑满空间.当有多个组件都指定了flex的值,那么谁的flex值大谁占得空间就大,占得大小的比例就是flex值的 ...

  9. [技术博客]React Native——HTML页面代码高亮&数学公式解析

    问题起源 原有博文显示时代码无法高亮,白底黑字的视觉效果不好. 原有博文中无法解析数学公式,导致页面会直接显示数学公式源码. 为了解决这两个问题,尝试了一些方法,最终利用开源类库实现了页面美化. (失 ...

随机推荐

  1. 创建mavenweb项目

    1.创建maven项目 2.创建maven-web项目 3.将webapp文件夹复制到maven项目下,src路径下

  2. farm

    farm 时间限制:C/C++ 4秒,其他语言8秒 空间限制:C/C++ 262144K,其他语言524288K 64bit IO Format: %lld 题目描述 White Rabbit has ...

  3. SpringBoot项目整合Druid进行统计监控

    0.druid介绍,参考官网 1.在项目的POM文件中添加alibaba的druid依赖 <dependency> <groupId>com.alibaba</group ...

  4. WAMP本地环境升级php版本--第二次尝试

    wamp 环境下 php5.6.25 升级php7.1.17 实践 本文参考:https://www.cnblogs.com/hubaohua1588/p/6884146.html来进行操作. 1.从 ...

  5. Codeforces 667D World Tour【最短路+枚举】

    垃圾csdn,累感不爱! 题目链接: http://codeforces.com/contest/667/problem/D 题意: 在有向图中找到四个点,使得这些点之间的最短距离之和最大. 分析: ...

  6. Unity3D 异步加载 在 场景加载 中的使用

    异步加载 我们想一想玩过的一些游戏,基本都会有加载界面——因为游戏场景数据较大,所以需要加载一小段时间.那为什么一些2D游戏也会有加载界面呢?按理说2D游戏场景会很小,这样做是为了让游戏跑在低端设备上 ...

  7. [Bzoj3172][Tjoi2013]单词(fail树)

    3172: [Tjoi2013]单词 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 4777  Solved: 2345[Submit][Status ...

  8. 51 NOD 1325 两棵树的问题

    Discription 对于 100% 的数据, N<=50. solution: 发现N比较小,所以我们可以花O(N^2)的代价枚举两颗树的联通块的LCA分别是哪个点,然后现在问题就变成了:选 ...

  9. Maven打包时过滤测试代码或指定特定的测试类(maven-surefire-plugin)

    1.过滤整个测试代码,可以直接在命令行上指定 mvn clean install -Dmaven.test.skip=true 提示:以上为举例,具体的构建阶段可以自定义,其中maven.test.s ...

  10. flask使用debug模式时,存在错误时,会占用设备内存直至服务重启才释放;debug模式会开启一个守护进程(daemon process)

    函数调用顺序flask的app.py的run-->werkzeug的serving.py的run_simple-->调用werkzeug的debug的__init__.py里的类Debug ...