按照官网很简单, 安装 npm install semantic-ui-react --save npm install semantic-ui-css --save 然后在index.js里导入 import 'semantic-ui-css/semantic.min.css'; 就可以用了。
Archive for react
又重新学习react了,这次按照官网再装一遍。react-native差不多了,react还没搞个东西,hah。 安装 npm install -g create-react-app 创建一个app create-react-app my-app 运行 cd my-app npm start 现在自带Babel监控文件,进行自动编译
一直在调试ios的react-native的程序,好久没在Android下编译过,今天搞了一下。编译通过了,程序启动报了个错误“Unfortunately, app has stopped” adb logcat 能看到log。github有解决方式 编辑android/app/src/main/AndroidManifest.xml文件 application标签里加个属性android:name=".MainApplication" 然后就好了
之前没有这个错“Type Error: Network request failed”,然后之后有了,很纳闷。 通过查找发现是ios9之后请求必须走https不然系统就给你禁掉了。解决办法 Info.plist文件里修改 <key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> <key>NSExceptionDomains</key> <dict> <key>localhost</key> <dict> <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict> </dict> 这个官方网站也有提,“Running On Device”这节。
搞了两三次升级了,各种问题,都不记得了。 npm install --save react-native@0.29 然后提示 “UNMET PEER DEPENDENCY react@15.0.2”。 npm WARN react-native@0.29.1 requires a peer of react@~15.2.0 but none was installed. 然后根据提示升级react的版本,npm install --save react@~15.2.0。 然后又执行了一遍:npm install --save react-native@0.29 就好了。 第二部执行:react-native upgrade,会替换很多配置等文件。 第三步:rnpm link 导入资源
很多东西搞一次查一次很烦,记一下,下一次找笔记。加深记忆 react-native-vector-icons这个改了一下配置文件导入静态资源,upgrade react-native的时候每次选择替换配置文件,然后会找不到资源文件。执行rnpm link就好了 对于安卓和ios两个版本,发现大部分人的做法是开发两套,我直接写了一套,对于不兼容的地方判断操作系统不同针对。方法 var { Platform } = React; var styles = StyleSheet.create({ height: (Platform.OS === 'ios') ? 200 : 100, });
react大体看了一下,设计的真好啊。没有DOM操作,只需要看stat,刷新只需要改变的组件。
react-navie安装 按照官网教程来就行了。安装xcode,npm install -g react-native-cli
创建一个项目
react-native init TestProject
运行ios
可以直接用xcode打开TestProject/ios/TestProject.xcodeproj ,然后运行。
也可以进到项目根目录运行,react-native run-ios。这个好处就是不用开xcode,用别的编辑器编辑就行了。
改完js文件也不需要重新编译,在模拟器快捷键command+r就能看到结果了。屌屌屌
通过我粗略的查看,每次都是ios应用请求http://127.0.0.1:8081/index.ios.bundle?platform=ios&dev=true,返回一个js文件,包括了我helloword的代码。有个flow的请求不知道干啥的,返回了404.
安卓安装
下载android-sdk_r24.4.1-macosx.zip,解压,添加到环境变量export ANDROID_HOME=/Users/tools/android-sdk-macosx,
然后运行tools里边的android,启动sdk管理界面,这里被墙了,可以使用翻墙代理,127.0.0.1:8086配置一下。必须选择“Force https://... sources to be fetched using http://...”不然回报证书错误。
SDK Platform Android 6.0, API 23, revision 2这个安装不是大小不对,就是超时。从代理log里找到下载链接http://dl.google.com/android/repository/android-23_r02.zip,直接下载,下载完放到.android/cache目录下。这种方法不好用,开始有些包还没有,我重启了sdk管理工具就都有了,不知道是依赖还是咋回事.
复制错目录了,是安卓sdk的temp目录,不是管理工具那个缓存目录。然后成功,其他也可以这么下载。
安装加速器
需要npm安装依赖工具,npm安装方法 mac安装node js 这篇之前安装的。 安装好nodejs之后,安装工具 npm install --global babel-cli npm install babel-preset-react 之后让babel检查源文件目录,有更改自动编译。 babel --presets react src --watch --out-dir build src/hello.js -> build/hello.js html内容,react.js直接在官网下载的编译好的。
test
hello.js文件。
ReactDOM.render(
Hello, world!
,
document.getElementById('example')
);
然后目录里起一个httpserver,就能看到hello world了。