RN开发系列＜3＞--React基础_html 双花括号

一、探讨以下几个React的核心概念

• components组件
• JSX
• props属性
• state状态

1. 一个RN项目的入口是index.js

我们让入口指向我们自己写的组件

• index.js文件

import {AppRegistry} from 'react-native';
import App from './App';
import myApp from './MyDemo/myDemo01';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => myApp);
1
2
3
4
5
6

• myDemo01.js 文件（这里我们使用函数式组件）

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

const Cat = () => {
  return (
    <Text>我是猫我是猫我是猫我是猫我是猫我是猫</Text>
  );
}

export default Cat;
1
2
3
4
5
6
7
8
9
10

（1）要定义一个组件，首先需要导入React

import React from 'react';
1

（2）要使用文本，就导入文本组件

import { Text } from 'react-native';
1

（3）一个简单的函数，可以作为一个组件

const Cat = () => {};
1

（4）函数的返回值，被渲染成为一个React元素

const Cat = () => {
  return (
    <Text>我是猫我是猫我是猫我是猫我是猫我是猫</Text>
  );
}
1
2
3
4
5

（5）这样，我们就定义好了一个元素，但是为了给其他地方用，我们需要导出，导出方法如下：

export default Cat;
1

（6） <Text>我是猫我是猫我是猫我是猫我是猫我是猫</Text>这是一种简化React元素的写法，这种语法名字叫做JSX

2.JSX

（1）JSX本质上就是JavaScript，所以可以使用变量。

const Cat = () => {
  const name = "kitty";

  return (
    <Text>我是猫我是猫我是猫我是猫我是猫我是猫，我名字叫{name}</Text>
  );
}
1
2
3
4
5
6
7

（2）也可以调用一个函数

const Cat = () => {
  const name = "kitty";

  return (
    <Text>我是猫，我名字叫{getCatName("张三","家的猫")}</Text>
  );
}

const getCatName = (firstName, secondName) => {
  return firstName + secondName;
}

1
2
3
4
5
6
7
8
9
10
11
12

（3）自定义组件

1. 只能返回一个组件，所以要用一个父控件打包起来。
2. 导入对应的组件

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

const Cat = () => {

  return (
    <View>
      <Text>我是猫，我名字叫{getCatName("张三","家的猫")}</Text>
      <TextInput>你好</TextInput>
    </View>
  );
}

const getCatName = (firstName, secondName) => {
  return firstName + secondName;
}

export default Cat;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3. props传值

1. 这里的属性的写法比较简单，不需要定义，直接使用
2. 在自定义组件里面，写上props.name，那么这个组件就有了name属性
3. 传值的时候，直接给这个name属性赋值就行
4. 不用担心安全问题，如果没有定义height属性，在给组件传值的时候，增加了height = ‘3.4’，也不会因为找不到height属性而崩溃

const Cat = (props) => {

  return (
    <View>
      <Text>我是猫，我名字叫{props.name}</Text>
      <Text>我是猫，我年龄{props.age}岁</Text>
    </View>
  );
}

const Animal = () => {
  return(
    <View>
      <Cat name = "哈哈哈" age = '10' height = '3.4'></Cat>
      <Cat name = "嘿嘿嘿" age = '20'></Cat>
    </View>
  )
}
export default Animal;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

• 再看下面示例

const CapImg = () => {
  return(
    <View>
      <Image
        source = {
          { 
            uri: "https://reactnative.dev/docs/assets/p_cat1.png"
          }
        }
        style = {
          {
            width: 200,
            height: 200
          }
        }
      />
    </View>
  )
}

const Cat = (props) => {

  return (
    <View>
      <Text>我是猫，我名字叫{props.name}</Text>
      <Text>我是猫，我年龄{props.age}岁</Text>
    </View>
  );
}

const Animal = () => {
  return(
    <View>
      <CapImg></CapImg>
      <Cat name = "哈哈哈" age = '10' height = '3.4'></Cat>
      <Cat name = "嘿嘿嘿" age = '20'></Cat>
    </View>
  )
}
export default Animal;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

效果图：

• Image 和 Style的使用注意点

1. style里面用的是双层花括号{{}}，Image里面也是{{}}
2. 第一层花括号是必须的，表示里面要放一个对象
3. 第二次花括号是用来表示对象。如下：

   {
       width: 200,
       height: 200
   }
   1
   2
   3
   4

   { 
       uri: "https://reactnative.dev/docs/assets/p_cat1.png
   }
   1
   2
   3

4. 所以有两层括号

   <Image
      source = {
        { 
          uri: "https://reactnative.dev/docs/assets/p_cat1.png"
        }
      }
      style = {
        {
          width: 200,
          height: 200
        }
      }
    />
1
2
3
4
5
6
7
8
9
10
11
12
13

5.State状态

1. 用于刷新界面的数据，这个state改变–>驱动界面刷新

import React,{useState} from 'react';
import { Text,TextInput,View,Image,Button } from 'react-native';



const CapImg = () => {
  return(
    <View>
      <Image
        source = {
          { 
            uri: "https://reactnative.dev/docs/assets/p_cat1.png"
          }
        }
        style = {
          {
            width: 200,
            height: 200
          }
        }
      />
    </View>
  )
}

const Cat = (props) => {
  const [isHungry, setIsHungry] = useState(true);

  return (
    <View>
      <Text>我是猫，我名字叫{props.name}</Text>
      <Text>我是猫，我年龄{props.age}岁</Text>
      <Button
        onPress={() => {
          setIsHungry(!isHungry)
        }}
        title = {isHungry ? "I'm Hungry" : "饱了，去玩耍"}
      ></Button>
    </View>
  );
}

const Animal = () => {
  return(
    <View>
      <CapImg></CapImg>
      <Cat name = "哈哈哈" age = '10' height = '3.4'></Cat>
      <Cat name = "嘿嘿嘿" age = '20'></Cat>
    </View>
  )
}
export default Animal;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

2. 说明：
   (1) 导入useState

   import React, { useState } from 'react';
   1

   (2)声明状态

   const [isHungry, setIsHungry] = useState(true);
   1