react-native 从0开始 ( 基础知识 一 )

1.Hello World

【 Hello World 】

延续悠久的历史传统，以 Hello word作为开篇

import React from 'react';
import { Text, View } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
    </View>
  )
}
export default HelloWorldApp;

可以看到，在代码中使用了<View/>、 <Text/>，作用就是用来替代web的<div/>和<span/>标签

View常用作其他组件的容器，来帮助控制布局和样式。

2. Props（属性）

【 Props（属性）】

2.1 绑定属性

import React from 'react';
import { Image } from 'react-native';

const Bananas = () => {
    let pic = {uri: 'https://profile.csdnimg.cn/A/6/A/3_dark_programmer'};
    return (
      <Image source={pic} style={{width: 193, height: 110, marginTop:50}}/>
    );
}

export default Bananas;

以常见的image为例。在想创建图片的时候，需要给一个名为source的prop属性来指定图片地址，可使用style来控制其样式。需要注意的就是 source的值是在{ }里的，这个花括号的作用就是将内容嵌套JSX语句。
上面的return里的代码也可这样来写

 return (
      <Image source={{uri: 'https://profile.csdnimg.cn/A/6/A/3_dark_programmer'}} style={{width: 193, height: 110, marginTop:50}}/>
    );

这样写就比较明显，source的值需要传递的是一个 js 变量或表达式，需要用{ }来包裹

2.2 组件复用

import React from 'react';
import { Text, View } from 'react-native';

const Greeting = (props) => {
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {props.name}!</Text>
      </View>
    );
}

export default LotsOfGreetings = () => {
    return (
      <View style={{alignItems: 'center', top: 50}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
}

3. State（状态）

【 State（状态） 】

• 一切界面变化都是状态state变化
• state的修改必须通过setState()方法
  this.state.likes = 100; // 这样的直接赋值修改无效！
  setState 是一个 merge 合并操作，只修改指定属性，不影响其他属性
  setState 是异步操作，修改不会马上生效