嘿，老铁们，今天咱们聊聊React Native项目实战。你说你准备好了吗？别急，先跟着我一步步来保证你Neng从零起步跑到手机上。

我知道有些人第一次听到这名字就想吐槽：“又是一个JS框架？我不想写JS。”但别忘了它是桥梁。前端技术栈熟悉的同学Ke以直接拿来Zuo原生APP。Zui重要的是热重载功Neng，你改一行代码，手机马上刷新，真是爽到飞起。

你需要的东西hen少：

Node.js

npm或yarn

Xcode

Android Studio

安装完后把npx @react-native-community/cli init MyApp --version 0.71敲进去。注意，不要用旧的react-native init命令，那玩意Yi经被弃用了。

整个目录长这样：

MyApp/
├── android/
├── ios/
├── src/
│   ├── components/
│   └── screens/
├── App.tsx
└── package.json

里面App.tsx是入口文件，你在里面挂载根组件。

下面给出一个Zui简洁的计数器示例，你Ke以直接粘贴到src/components/Counter.tsx

import React,{useState} from 'react';
import {View,Text,TouchableOpacity,StyleSheet} from 'react-native';
const Counter =  => {
  const  = useState;
  return (
    
      {count}
      setCount}>
        +
      
    
  );
};
const styles = StyleSheet.create({
  container:{flex:1,justifyContent:'center',alignItems:'center'},
  counter:{fontSize:48,fontWeight:'bold',marginBottom:20},
  button:{backgroundColor:'#4CAF50',padding:10,borderRadius:5},
  btnText:{color:'#fff',fontSize:24}
});
export default Counter;

说实话，我当时把计数器写成了全局变量导致崩溃，那次真尴尬。不过现在好了。

Baidu搜索引擎对JavaScript渲染有一定限制。他们会尝试抓取页面源代码，但Ru果页面内容全部依赖于JS渲染，而不是服务器端渲染，那么它就可Neng认为页面为空白，从而决定不将其纳入索引范围。换句话说Ru果你的React Native项目没有对应的HTML预渲染或服务端API返回完整内容，就可Neng出现“百度不收录”的情况。

解决办法：

NoCode SSR：使用Next.js或NuxtZuoSSR，然后把API交给RN消费。

MVP：Ru果只是学习演示，Ke以在GitHub Pages里放一个简易HTML页，指向你的项目链接，让Baidu有抓取对象。

KISS：把核心业务逻辑抽离成可直接调用的REST接口，确保搜索引擎Nengkan到数据结构。

Meteor bundler默认监听8081端口。Ru果被占用，你Ke以这样杀掉进程：

lsof -i :8081
kill -9 PID
# 或者直接重启：
npm start -- --reset-cache

M按Command+D打开开发菜单；然后点“Debug JS Remotely”。Chrome会弹出来这时候你Ke以像平时Web那样kanConsole、断点等。

Pong：Ru果发现模拟器卡住按Command+R重新加载即可。

Aha！记得先运行npm start -- --port=8086 , 防止与其他服务冲突。

Ndk版本不匹配导致构建失败？ - 打开android/build.gradle，把ndkVersion改成当前Yi安装的NDK版本，比如28.

"Gradle daemon crashed" 的报错？ - 清空gradle缓存：./gradlew clean && ./gradlew assembleDebug.

"Hot reload doesn't work" - 确认Metro bundler正在运行，再按R+R 或 A+A 。若还没反应，把app完全关闭后重新启动一次。别忘了清空缓存：npm start -- --reset-cache.

"Module not found" - 检查路径大小写；Windows下路径区分大小写比较敏感。删掉node_modules后重新 npm install.

"Cannot find react-native/package.json"- 确认react-native依赖Yi正确安装。有时因为网络原因安装失效，Ke以换源或手动下载包再放回node_modules.