react native项目初始化

1. 创建react-native项目

npm install -g yarn react-native-cli
react-native init 项目名

目录结构：

确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行react-native run-android：
react-native run-android 启动应用

react-native start  启动服务

 

2. 初始化node后端

（1）使用express-generator快速创建一个express框架，全局安装express generator生成器：
  npm i –g express-generator
  express --version
（2）基于生成器生成项目（cd到指定）
  express 文件夹名
（3）npm install
（4）在IDE的终端或者计算机的终端， cd到项目中的server/bin目录下

3. React native在web上运行（在已有的RN项目下执行以下操作）

​（1）安装ReactWeb命令行工具：npm install react-web-cli -g
（2）在RN工程的上级目录执行命令：react-web init <ProjectName>
（3）提示已经存在目录，输入 yes ，继续安装执行
（4）进入工程目录，安装 react-dom , npm install react-dom –save
（5）本地图片的加载处理。安装 file-loader : npm install --save file-loader
（6）在 web/webpack.config.js 文件里面，加入代码：

{
    test: /.(eot|otf|svg|ttf|woff|woff2|png|jpg|gif)\w*/,
    loader: 'file'
}

7．修改web/webpack.config.js 的开发选项设置：devtool: false
8．在RN入口文件index.ios.js头部引用Platform，并在末尾加入代码：

if(Platform.OS == 'web'){
    varapp = document.createElement('div');
    document.body.appendChild(app);
    AppRegistry.runApplication('moduleName', {
    rootTag: app
   });
}

​

9．运行打包命令react-web bundle，在web/output目录下生成了Web版文件，打开index.html就可以看到程序运行效果。
10．退回工程目录，运行命令react-web start，可以在浏览器输入localhost:3000 进行访问。