React native最基础的入门知识点

Learn once, write anywhere: Build mobile apps with React.

1.新建RN项目：

    $ react-native init MyProject(项目名称)

 确保项目下有node_modules后，运行$react-native run-android来运行项目。

2.RN基本入门及知识点

    2.1 入口

         Android的入口文件是根目录下的index.android.js，Ios的入口文件是根目录下的index.ios.js.

    2.2 AppRegistry是JS运行所有React Native应用的入口。应用的根组件应当通过AppRegistry.registerComponent方法注册自己，然后原生系统才可以加载应用的代码包并且在启动    完成之后通过调用AppRegistry.runApplication来真正运行应用。

         eg:  AppRegistry.registerComponent('Helloworld', () => TestComponent);

   其中Helloworld是你的项目名称，TestComponent是你的入口组件的名称。

    2.3 基本组件

    常用的基本组件有Button, View, Image, ListVie，Textw等等，这些组件的引入方法是：import {Button，View, Image, ListView} from ‘’react-native.

   使用方法:

       <View /**它的一些样式或者属性，点击事件等可以定义在此处**/>

             <TextView style={{width:100, height:200}}>hello world</TextView>

      </View>

    2.4 组件显示的布局（flexBox布局详解）

    我们在React Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。

    在组件中的style中指定flexDirection可以决定布局的主轴，子元素是按着水平轴（row）排列，还是数值轴（colum，默认值）排列。flex：定义了元素的可伸缩能力。默认     值是0

    在组件中的style中指定justifyContent可以决定子元素沿着主轴的排列方式。靠近起始端：flex-start（默认）。 靠近末端：flex-end。 中心：center。space-around 和space-              between。

   在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。

   对应的这些可选项有：flex-start（靠近次轴起始端）、center（次轴中心）、flex-end(次轴末尾段)以及stretch（元素被拉伸以适应容器）。

   注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。

   使用方法（完整RN Demo）：

 

    2.5 自定义组件

    自定义组件需要继承React.Component。组件渲染的方法是render（）。最基本的用法是：

        class MyComponent extends React.Component{

                 render() {   // 这个方法是必须的

                        Return();  //返回要显示的view最外层只能有一个view

                 }

         }

   导出组件：export default（default只能使用一次）MyComponent

   导入组件： import MyComponent from ‘./XX.js’

        export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。export，import可以处在任何位置，但必须是在模块顶层。 使用export default时import后不加    {}。 若使用export时，import后需要加{}。

    2.6 自定义样式：

       const styles = StyleSheet.create({

           XXX,

           XXX

     });

1.props和state的使用及区别

Props：大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。

以常见的基础组件Image为例，在创建一个图片时，可以传入一个名为source的prop来指定要显示的图片的地址，以及使用名为style的prop来控制其尺寸。

自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制，可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props，然后按需处理即可。

组件A -> 组件B。 组件A中传递的常量（如name），在组件B中可以通过this.props.name来得到。无论是function还是class都不能修改自身的props。

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

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

假如我们需要制作一段不停闪烁的文字。文字内容本身在组件创建时就已经指定好了，所以文字内容应该是一个prop。而文字的显示或隐藏的状态（快速的显隐切换就产生了闪烁的效果）则是随着时间变化的，因此这一状态应该写到state中。

 

2.constructor（）方法 --构造函数

一般构造函数都会先super（props）；

3.方法的定义

function functionName() {

}

在类的内部不使用关键字function

functinName（x, y）{}或者是 functionName：（x, y）=> {} （箭头函数）

4.使用导航器实现页面的跳转

StackNavigator

TabNavigator

DrawerNavigator

5.let const var的用法

const 只可以初始化常量

var 定义变量，若不初始化或输出undeifne，不会报错

let 它的作用域是块级，用法类似于var。（for循环中可用let）

6.生命周期

 

 

7.Redux

Redux 的设计思想很简单，就两句话。

（1）Web应用是一个状态机，视图与状态是一一对应的。

（2）所有的状态，保存在一个对象里面。

 

react-redux：

React-Redux 将所有组件分成两大类：UI组件（presentational component）和容器组件（container component）。

React-Redux 提供connect方法，用于从UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。

connect方法的完整 API如下。

import { connect } from 'react-redux'

const VisibleTodoList = connect(

  mapStateToProps,

  mapDispatchToProps

)(TodoList)

 

Provier:

import { Provider } from 'react-redux'

render(

  <Provider store={store}>

    <App />

  </Provider>

)

这样App下的所有子组件都可以拿到state

10.零散知识点梳理：

（1）...items其中三个点（...）表示扩展运算符。是一个将数组用，分割开的参数序列。

（2）箭头函数： functionName:（x）=>{}  === functionName(x) {}

（3）注意this的使用：禁止this指向全局对象。即顶层的this指向undefined。

（4）块级作用域时可以用let代替var

（5）全局常量和线程安全

在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量。

const优于let有几个原因。一个是const可以提醒阅读程序的人，这个变量不应该改变；另一个是const比较符合函数式编程思想，运算不改变值，只是新建值，而且这样也有利于将来的分布式运算；最后一个原因是JavaScript 编译器会对const进行优化，所以多使用const，有利于提供程序的运行效率，也就是说let和const的本质区别，其实是编译器内部的处理不同。

const声明常量还有两个好处，一是阅读代码的人立刻会意识到不应该修改这个值， 二是防止了无意间修改变量值所导致的错误。

所有的函数都应该设置为常量。

长远来看，JavaScript可能会有多线程的实现（比如Intel的River Trail那一类的项目），这时let表示的变量，只应出现在单线程运行的代码中，不能是多线程共享的，这样有利于保证线程安全。

（6）静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号。

（7）简单的、单行的、不会复用的函数，建议采用箭头函数。如果函数体较为复杂，行数较多，还是应该采用传统的函数写法。

11.完整的component组成：

l import xxx from‘’

l 此处可以定义顶层的常量，function， 或者class

l export {xx，xx}

 

Init class demo:

class ClassDemo extends React.Component {

constructor(props: xxType) {

super(props)

this.state={

name:’hello’,

index:1

}

}

 

componentWillMount() {}

render () {

return(

<Button title=’Press’ onPress={() => this.function1()}/>

);

}

 

componentDidUpdate () {}

 

function1(){}

 

function2() {}

}