搭建React Native开发环境
本文是对Ubuntu环境下开发环境的搭建 Android Studio下载Android Studio2.2: http://www.androiddevtools.cn/; 安装nodeJS下载node-v5.0.0-linux-x64解压即可; sudo ln -s /XXXXXX/tools/node-v5.0.0-linux-x64/bin/node /usr/bin/node
sudo ln -s /XXXXXX/tools/node-v5.0.0-linux-x64/bin/npm /usr/bin/npm
sudo npm install -g yarn react-native-cli
sudo ln -s /home/heqiang/install/tools/node-v5.0.0-linux-x64/bin/react-native /usr/bin/react-native
sudo ln -s /home/heqiang/install/tools/node-v5.0.0-linux-x64/bin/yarn /usr/bin/yarn
sudo ln -s /home/heqiang/install/tools/node-v5.0.0-linux-x64/bin/yarnpkg /usr/bin/yarnpkg
开始创建第一个工程react-native init AwesomeProject
cd AwesomeProject/
连接好手机 react-native run-android
发现下面的错误: heqiang@EF-heqiang:~/react-native-workspace/AwesomeProject$ react-native run-android
Starting JS server...
Running adb -s M960ADPBB7C7M reverse tcp:8081 tcp:8081
Building and installing the app on the device (cd android && ./gradlew installDebug...
Failed to notify ProjectEvaluationListener.afterEvaluate(),but primary configuration failure takes precedence.
java.lang.RuntimeException: SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.
at com.android.build.gradle.internal.SdkHandler.getAndCheckSdkFolder(SdkHandler.java:102)
at com.android.build.gradle.internal.SdkHandler.getSdkLoader(SdkHandler.java:112)
at com.android.build.gradle.internal.SdkHandler.initTarget(SdkHandler.java:86)
at com.android.build.gradle.BasePlugin.ensureTargetSetup(BasePlugin.groovy:507)
at com.android.build.gradle.BasePlugin.createAndroidTasks(BasePlugin.groovy:455)
at com.android.build.gradle.BasePlugin$_createTasks_closure13_closure17.doCall(BasePlugin.groovy:415)
at com.android.build.gradle.BasePlugin$_createTasks_closure13_closure17.doCall(BasePlugin.groovy)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
按他说的去配置local.properties的adk.dir sdk.dir=/home/heqiang/install/android-studio/android-sdk-linux
再次启动,OK了。
(Android 5.0以下)通过Wi-Fi连接你的本地开发服务器
由于我的环境是Android 5.0以上,所以选择第一种方式。 Scanning 716 folders for symlinks in /home/heqiang/react-native-workspace/AwesomeProject/node_modules (8ms)
┌────────────────────────────────────────────────────────────────────────────┐
│ Running packager on port 8081. │
│ │
│ Keep this packager running while developing on any JS projects. Feel │
│ free to close this tab and run your own packager instance if you │
│ prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
/home/heqiang/react-native-workspace/AwesomeProject
[Hot Module Replacement] Server listening on /hot
React packager ready.
[2016-12-07 09:45:21] <START> Initializing Packager
[2016-12-07 09:45:21] <START> Building in-memory fs for JavaScript
[2016-12-07 09:45:21] <END> Building in-memory fs for JavaScript (71ms)
[2016-12-07 09:45:21] <START> Building Haste Map
[2016-12-07 09:45:21] <END> Building Haste Map (226ms)
[2016-12-07 09:45:21] <END> Initializing Packager (431ms)
[2016-12-07 09:45:40] <START> Requesting bundle bundle_url: /index.Android.bundle?platform=android&dev=true&hot=false&minify=false
[2016-12-07 09:45:40] <START> Transforming files
点击一下RELOAD,有东西显示了,可以对React Native Say Hello了! 开发工具Sublime Text 3安装下载安装包:https://www.sublimetext.com/ subl 导入项目点击菜单栏的“Project”–>”Add Folder to Project” ,选择项目的目录,就将项目导入进来了。 安装插件
React Native开发推荐的一些插件:
{
"keys": [
"super+e"
],"args": {
"action": "expand_abbreviation"
},"command": "run_emmet_action","context": [{
"key": "emmet_action_enabled.expand_abbreviation"
}]
},{
"keys": ["tab"],"command": "expand_abbreviation_by_tab","context": [{
"operand": "source.js","operator": "equal","match_all": true,"key": "selector"
},{
"key": "preceding_text","operator": "regex_contains","operand": "(b(ab|div|span|pb|button)(.w*|>w*)?([^}]*?}$)?)","match_all": true
},{
"key": "selection_empty","operand": true,"match_all": true
}]
}
使用super+e触发 emmet,自动补齐;
Sublime Text 3的使用可以参考下面的文章: 参考文章http://reactnative.cn/docs/0.39/getting-started.html (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |