【跨端技术】React Native学习记录一

一. 官方文档学习

官方文档

1. 环境搭建

资料1
资料2

2. 函数式组件和class组件

函数式组件和 Class 组件是 React 中定义组件的两种主要方式，它们在语法、功能和使用场景上有一些区别。

• 函数式组件（Functional Component）
  函数式组件是一个简单的 JavaScript 函数，接收一个 props 对象作为参数，并返回一个 React 元素。它是定义组件的最简单方式。

function Welcome(props) { return<h1>Hello, {props.name}</h1>; }

• Class 组件（Class Component）
  Class 组件是通过继承 React.Component 类来定义的，它需要实现 render() 方法来返回 React 元素。

class Welcome extends React.Component { render() { return<h1>Hello, {this.props.name}</h1>; } }

3. React 基础

添加链接描述

3.1 JSX语法定义一个组件

importReactfrom'react';import{Text}from'react-native';constCat=()=>{return(<Text>Hello,Iam your cat!</Text>);}exportdefaultCat;

在别处通过来任意引用这个组件了

3.2 Props 属性

importReactfrom'react';import{Text,View}from'react-native';constCat=(props)=>{return(<View><Text>Hello,Iam{props.name}!</Text></View>);}constCafe=()=>{return(<View><Cat name="Maru"/><Cat name="Jellylorum"/><Cat name="Spot"/></View>);}exportdefaultCafe;

3.3 State 状态

如果把 props 理解为定制组件渲染的参数， 那么state就像是组件的私人数据记录。状态用于记录那些随时间或者用户交互而变化的数据。状态使组件拥有了记忆！

importReact,{useState}from"react";import{Button,Text,View}from"react-native";constCat=(props)=>{const[isHungry,setIsHungry]=useState(true);return(<View><Text>Iam{props.name},andIam{isHungry?"hungry":"full"}!</Text><Button onPress={()=>{setIsHungry(false);}}disabled={!isHungry}title={isHungry?"Pour me some milk, please!":"Thank you!"}/></View>);}constCafe=()=>{return(<><Cat name="Munkustrap"/><Cat name="Spot"/></>);}exportdefaultCafe;

4. 处理文本输入