React Native 学习笔记六（关于宽高的设置）

继续在之前的例子上进行添加尺寸

1.使用固定的尺寸设置View容器和设置自定义的组组件如果父组件的空间不足自控件的会出现重叠的情况

示例：

import {AppRegistry,StyleSheet,Text,View
} from 'react-native';
class Blank extends  Component{//初始化state(从ES6开始 在construct中进行初始化  ES5中使用getInitinalState进行初始化  不过会逐渐被淘汰)
  constructor(props){super(props);//初始化状态为显示文本  同时定义showText 后面根据showText修改state的值
    this.state={showText:true};//每隔200ms进行取反 隐藏文本操作
    //lambda表达式  表示对于一个方法的某个参数的具体实现 也可以用来便利map集合等等
    setInterval(()=>{this.setState({showText:!this.state.showText});},200);}render(){let display=this.state.showText?this.props.text:' ';return(//根据当前的showText的值 决定时候显示text的内容
        <Text style={styles.red}>{display}</Text>);}
}class helloReact1 extends Component {//渲染
  render() {return (//设置显示风格 自定义View 显示结果为Hellohello HelloWorld
        <View style={{width:220,height:440 ,backgroundColor:'yellow'}}><Blank text='I want you'/><Blank text='I want you1111'/><Blank text='I want you2222'/></View>);}
}const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {fontSize: 20,textAlign: 'center',margin: 10,},red: {fontSize: 20,textAlign: 'right',margin: 10,color:'#ff0000',width:100,height:100,backgroundColor:'#00ff00'
  },instructions: {textAlign: 'center',color: '#333333',marginBottom: 5,},
});
//调用方法 完成渲染(应用注册后才能正确的渲染)
//将赠个应用作为整体进行注册  而不是每个模块都需要注册(第一个参数是应用的名字 第二个参数 是class(模块)的名字)
AppRegistry.registerComponent('helloReact', () => helloReact1);

2.弹性宽高（flex）flex就像android中linear layout中的weight（权重）时一样的如果大小值相同则平分空间否则谁大谁占据的空间就大

注意：组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。

red: {fontSize: 20,textAlign: 'right',margin: 10,color:'#ff0000',width:100,//height:100,
  backgroundColor:'#00ff00',flex:1
},

试着在

<Blank  text='I want you'/>中添加属性flex但是没有起作用 原因未知

加载顺序是从上到下所有加载完了在执行注册模块的render方法可以在import中进行优化

React Native 学习笔记六（关于宽高的设置）相关推荐

react native学习笔记29——动画篇 Animated高级动画
1.前言上一节我们学习了全局的布局动画api--LayoutAnimation,体验到其流畅柔和的动画效果,但有时我们需要实现一些更精细化的动画,或者完成一些组合动画,这时我们可以使用React N ...
React Native学习笔记一之搭建开发环境
因为项目需要,今天开始正式学习React Native,先来搭建个开发环境忐忑的心情因为项目比较急,而且客户要求使用React Native开发,只能先学点基础然后在项目中使用的时候,边做边学了, ...
react native 学习笔记
编译第一坑 Error type 3. Activity class {com.awesome_project/ com.awesome_project.MainActivity} does not ...
react native学习笔记13——FlatList上拉加载
我们可以利用官方组件RefreshControl实现下拉刷新功能,但React Native官方没有提供相应的上拉加载的组件,因此在RN中实现上拉加载比下拉刷新要复杂一点. 虽然没有直接提供上拉加载的 ...
React Native学习笔记-1：JSC profiler is not supported.(转载）
运行react-native中Example下的UIEXPLORER Project 遇到虾面报错: 2016-03-21 14:12:18.941 [trace][tid:com.facebook. ...
React Native 学习资源精选仓库
<React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开源App.资源下载.以及相关新闻等,只求精不求全.因后面无法 Pu ...
React Native 学习资源精选仓库(汇聚知识，分享精华)
React Native 学习资源精选仓库(汇聚知识,分享精华) <React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开 ...
React系统学习笔记
***当前阶段的笔记 *** 「面向实习生阶段」https://www.aliyundrive.com/s/VTME123M4T9 提取码: 8s6v 点击链接保存,或者复制本段内容,打开「阿里云盘」 ...
Python学习笔记六——画小猪佩奇
目录 Python学习笔记六--画小猪佩奇画布画笔属性设置操纵命令运动命令画笔控制命令全局控制命令其他命令 Python学习笔记六--画小猪佩奇使用Python的turtle库可以绘 ...

React Native 学习笔记六（关于宽高的设置）

React Native 学习笔记六（关于宽高的设置）相关推荐

最新文章

热门文章