react native学习【3】——创建自己的APP

1、终端输入命令npx create-expo-app MyAPP (MyAPP 是自己起的一名字)

不管最终会出现多少的warn，但最终还是可以运行成功的。

上面这个代码，刚刚安装了一个expo应用程序使用默认模板，如果说想要使用不同的标志，就需要运行下面的命令：

2、进入MyApp文件夹 cd MyApp

3、输入npx expo start 将启动应用程序

显示出二维码，可以用手机上的expo扫描。

摁下w，进入网页界面

3、VS Code代码–index.tsx文件

1）点击index.tsx文件

.tsx是默认为typescript文件。因为我没有不想使用该语言，所以清空文件中的内容。

2）添加扩展程序

ES7+ React/Redux/React-Native/JS snippets

快捷方式本质上创建重新反应组件（机翻，所以可能不够准确），它也可以与做出本机反应。

3）重新编写index.tsx文件

输入rnfe

实际上是一个react native功能组件。

点击然后得到完整的组件

index改为app

选中一个index，然后ctrl+D，单击每一个index所在的位置，就直接选中了所有的index，输入App，完成更改。

更改后：

修改大小写

添加css代码，完善软件布局

a)文件顶部导入Stylesheet

b)添加styles

c)完善styles

import {
    View, Text,StyleSheet } from 'react-native'
/* 
View
    react native中的基本容器组件，类似于HTML 中的<div>，用来包裹其他的组件，帮助布局。
Text
    react native中的文本显示组件，类似于HTML中的<span>或<p>，用来显示文本内容。
StyleSheet 
    用于创建和管理样式，优化性能和代码结构。
    通过StyleSheet.create()方法创建样式对象，然后通过style属性应用到组件上。
 */
// 引入React库，为了使用JSX语法定义组件
import React from 'react'   


/* 
const app = () => {}
    定义了一个无状态的React函数组件。组件的功能是：返回UI结构（JSX)
return()
    函数组件必须返回JSX代码，它描述了组件的界面结构。
    JSX是React的语法扩展，允许用类似HTML的结构编写UI。
*/
// 1、编写app组件部分的代码