Match的React Native入门之旅

运行

react-native init AwesomeProject

cd AwesomeProject

react-native run-android

三 State（状态）

---

我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。

一般来说，你需要在constructor中初始化state（ES5:getInitialState方法来初始化state），然后在需要修改时调用setState方法。

---

五 样式

---

只是按照JS的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。

style属性可以是一个普通的JavaScript**对象**。这是最简单的用法，因而在示例代码中很常见。你还可以传入一个数组——在数组中位置**居后的样式对象比居前的优先级更高**，这样你可以间接实现样式的继承。

实际开发中组件的样式会越来越复杂，我们建议使用**StyleSheet.create**来集中定义组件的样式。

class LotsOfStyles extends Component {

render() {

return (

just red

just bigblue

<Text style={[styles.bigblue, styles.red]}>bigblue, then red

<Text style={[styles.red, styles.bigblue]}>red, then bigblue

<Text style={[styles.bigblue,{color:‘black’}]} > {display}

);

}

}

const styles = StyleSheet.create({

bigblue:{

color:‘blue’,

fontWeight:‘bold’,

fontSize:30,

color:‘red’,

}

});

六 高度与宽度

---

指定宽高

在样式中指定固定的width和height。React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。(dp)

<View style={{width: 50, height: 50, backgroundColor: ‘powderblue’}} />

弹性宽高（Flex）

在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。

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

此时子控件除非强制制定width height 才能显示

// 试试去掉父View中的flex: 1。

// 则父View不再具有尺寸，因此子组件也无法再撑开。

// 然后再用height: 300来代替父View的flex: 1试试看？

<View style={{flex: 1}}>

<View style={{flex: 1, backgroundColor: ‘powderblue’}} />

<View style={{flex: 2, backgroundColor: ‘skyblue’}} />

<View style={{flex: 3, backgroundColor: ‘steelblue’}} />

七 使用Flexbox布局

---

flexDirection(方向) justifyContent（主轴分布方式） alignItems（次轴分布方式)

使用flexbox规则来指定某个组件的子元素的布局。

一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。译

React Native中的Flexbox的工作原理和web上的CSS基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，而flex也只能指定一个数字值。

Flex Direction

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着**竖直轴(column)**方向排列呢？默认值是竖直轴(column)方向。

最后

**一个零基础的新人，我认为坚持是最最重要的。**我的很多朋友都找我来学习过，我也很用心的教他们，可是不到一个月就坚持不下来了。我认为他们坚持不下来有两点主要原因：

他们打算入行不是因为兴趣，而是因为所谓的IT行业工资高，或者说完全对未来没有任何规划。

刚开始学的时候确实很枯燥，这确实对你是个考验，所以说坚持下来也很不容易，但是如果你有兴趣就不会认为这是累，不会认为这很枯燥，总之还是贵在坚持。

技术提升遇到瓶颈了？缺高级Android进阶视频学习提升自己吗？还有大量大厂面试题为你面试做准备！

提升自己去挑战一下BAT面试难关吧

对于很多Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。整理的这些知识图谱希望对Android开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。

不论遇到什么困难，都不应该成为我们放弃的理由！

如果有什么疑问的可以直接私我，我尽自己最大力量帮助你！

最后祝各位新人都能坚持下来，学有所成。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！