react native 之页面布局
2016-08-12 14:42
351 查看
第一章 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 布局中,样式的引入是以数组的形式引入的.
4. 页面的横竖屏切换,出现滚动条,需要运用<scrollview>这个属性
5. 主页面需要引入代码中用到的相关组件与标签
第二章 component
1. 可以将其中的一些<view> 以component拆开,让后以标签的形式引入组件
2.<Navigator/> 标签是包括<view/> 这些标签的,不可以用component 的方式引入.
3.<ListView/> 属性,这个属性不会立即渲染页面,跟前前端的瀑布流相似,不同之处在于滚动条上端隐藏的页面会被自动切除,而不是隐藏.
第三章 props 与 state
1.props 是相关的属性值,比如<Img/> 标签的值,属性是不可以改变的.
2.state 表示数据,是可以改变的,store 是数据库,存储state.
3. 对于component,是需要初始化数据的,也就是state,其中super() 是 写的,初始化系统的数据;
如果在component 外,则不需要这行代码,会报错.
4.引入一个本地的json 文件,需要的就是props ,初始化数据,然后在渲染到页面中.
先用props 初始化数据:
然后就是定义数据
之后header 标签中可以直接用 this.props.data. ...直接调用
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也可以用)-温故而知新
- 微信小程序页面布局方式 (react native也可以用)-温故而知新
- 关于react-native的适配与布局方式
- React Native 滚动页面置顶
- react-native 布局
- reactNative中的导航页面
- React Native布局实践:开发京东客户端首页遇到的坑
- React Native 弹性布局FlexBox
- React-Native 学习之 Flex布局
- react-native 之布局篇
- React Native超棒的LayoutAnimation(布局动画)
- React-Native之仿携程App首页布局
- React Native布局详细指南
- React Native布局详细指南
- 解决react-native的Navigator跳转不刷新页面的问题
- ReactNative踩坑日志——页面跳转之——Undefined is not an Object(evaluating this2.props.navigation.navigate)
- react-native使用react-navigation进行页面跳转导航的示例
- React-Native基础_3.Flex布局
- ReactNative React-native-router-flux框架---刷新当前页面的属性
- 在iOS中创建React-Native页面,并跳转到原生页面