一、探讨以下几个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);
- myDemo01.js 文件(这里我们使用函数式组件)
import React from 'react';
import { Text } from 'react-native';
const Cat = () => {
return (
<Text>我是猫我是猫我是猫我是猫我是猫我是猫</Text>
);
}
export default Cat;
(1)要定义一个组件,首先需要导入React
import React from 'react';
(2)要使用文本,就导入文本组件
import { Text } from 'react-native';
(3)一个简单的函数,可以作为一个组件
const Cat = () => {};
(4)函数的返回值,被渲染成为一个React元素
const Cat = () => {
return (
<Text>我是猫我是猫我是猫我是猫我是猫我是猫</Text>
);
}
(5)这样,我们就定义好了一个元素,但是为了给其他地方用,我们需要导出,导出方法如下:
export default Cat;
(6) <Text>我是猫我是猫我是猫我是猫我是猫我是猫</Text>
这是一种简化React元素的写法,这种语法名字叫做JSX
2.JSX
(1)JSX本质上就是JavaScript,所以可以使用变量。
const Cat = () => {
const name = "kitty";
return (
<Text>我是猫我是猫我是猫我是猫我是猫我是猫,我名字叫{name}</Text>
);
}
(2)也可以调用一个函数
const Cat = () => {
const name = "kitty";
return (
<Text>我是猫,我名字叫{getCatName("张三","家的猫")}</Text>
);
}
const getCatName = (firstName, secondName) => {
return firstName + secondName;
}
(3)自定义组件
- 只能返回一个组件,所以要用一个父控件打包起来。
- 导入对应的组件
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;
3. props传值
- 这里的属性的写法比较简单,不需要定义,直接使用
- 在自定义组件里面,写上props.name,那么这个组件就有了name属性
- 传值的时候,直接给这个name属性赋值就行
- 不用担心安全问题,如果没有定义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;
- 再看下面示例
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;
效果图:
- Image 和 Style的使用注意点
- style里面用的是双层花括号
{{}}
,Image里面也是{{}}
- 第一层花括号是必须的,表示里面要放一个对象
- 第二次花括号是用来表示对象。如下:
{ width: 200, height: 200 }
{ uri: "https://reactnative.dev/docs/assets/p_cat1.png }
- 所以有两层括号
<Image
source = {
{
uri: "https://reactnative.dev/docs/assets/p_cat1.png"
}
}
style = {
{
width: 200,
height: 200
}
}
/>
5.State状态
- 用于刷新界面的数据,这个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) 导入useState
(2)声明状态import React, { useState } from 'react';
const [isHungry, setIsHungry] = useState(true);