小白学习react native 第一天

1.使用Expo开发

安装Expo的环境，需要安装node.js的版本

sql 复制代码

npx create-expo-app@latest 
// 输入项目名称demo
npx expo start

下载Expo App遵循同源策略实现内容布局和内容

最推荐的环境是Expo,没事不要折腾官网的原始开发环境

2.安装Android 和 IOS 模型器

2.1IOS当中安装开发配置环境变量

IOS 当中需要安装 Xcode 在苹果Store当中下载和安装推荐安装 ohmyzsh

并且还需要安装 Homebrew 直接在命令行当中运行

2.2Android环境模拟器 (windows)

安装 Android Studio 直接打开，打开的选项保持默认，直接下一步

只要C盘放的下，那就最好保持默认，然后直接下一步

详细信息查看官方文档教程，如有需要的话则继续选择使用。

3. Expo 操作指南

回到项目的上一层，这样会与之前的 expo-demo 项目在同一目录。再运行：

sql 复制代码

npx create-expo-app@latest --template blank

使用 template blank参数，创建一个空白的react native项目，创建TypeScript项目

sql 复制代码

npx create-expo-app@latest --template blank-typescript

可以进入项目当中，重新按i或者a就可以实现 shift + i/a 选择哪部手机的模拟器 command + 1真实大小在页面当中实现开始按 r 键就能够刷新

命令行当中按 j 键选择需要的信息选择不同的内容进行标注。命令行当中按 m 键弹出菜单

4.react native项目中代码该怎么写

4.1 JSX语法

在代码当中的View,Text, 并不是 HTML里的标签，它们都是组件，而且是原生组件。

4.2 StatusBar 组件

ini 复制代码

<StatusBar style = "auto" />  // 原生组件，用来显示屏幕顶部的电量、网络信息的

4.3 View组件

View组件可以当成HTML里的div来用，也就是用来布局页面用的。可以用它来包住其他的一些组件。现在做一些尝试。在View的下面，再增加一个View。

javascript 复制代码

export default function App() {
  return (
    <View style={styles.container}>
      <Text>欢迎来到长乐未央 React Native 课程!</Text>
    </View>
    <View></View>
  );
}

在编辑器上会直接显示报错：可以通过Fragment 和更大的View进行包裹。

4.4 Text 组件

当在小程序当中写了一段文字，没有 Text组件包裹，它是可以正常显示。
但在React Native 中，这样做100%会报错，它这里的文字内容必须放在Text组件里。

总结

开发React Native,使用的就是 React 语法
这种在JS里，返回类似于HTML代码的写法，叫做JSX
返回的东西其实都是原生组件，并不是HTML
每个组件当中只能返回一个最大的元素，而不是返回多个元素
在最外层，可以使用Fragments 组件或者View组件，包裹多个子组件
文字内容，一定要放在Text组件当中