Archive for react

React Semantic UI 使用

按照官网很简单, 安装 npm install semantic-ui-react --save npm install semantic-ui-css --save 然后在index.js里导入 import 'semantic-ui-css/semantic.min.css'; 就可以用了。
Read more...

React再学习,安装

又重新学习react了,这次按照官网再装一遍。react-native差不多了,react还没搞个东西,hah。 安装 npm install -g create-react-app 创建一个app create-react-app my-app 运行 cd my-app npm start 现在自带Babel监控文件,进行自动编译
Read more...

react-native android报错“Unfortunately, app has stopped”

一直在调试ios的react-native的程序,好久没在Android下编译过,今天搞了一下。编译通过了,程序启动报了个错误“Unfortunately, app has stopped” adb logcat 能看到log。github有解决方式 编辑android/app/src/main/AndroidManifest.xml文件 application标签里加个属性android:name=".MainApplication" 然后就好了
Read more...

react-native报错“Type Error: Network request failed”

之前没有这个错“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”这节。
Read more...

react-native升级操作

搞了两三次升级了,各种问题,都不记得了。   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 导入资源
Read more...

react-native一些总结

很多东西搞一次查一次很烦,记一下,下一次找笔记。加深记忆 react-native-vector-icons这个改了一下配置文件导入静态资源,upgrade react-native的时候每次选择替换配置文件,然后会找不到资源文件。执行rnpm link就好了 对于安卓和ios两个版本,发现大部分人的做法是开发两套,我直接写了一套,对于不兼容的地方判断操作系统不同针对。方法 var { Platform } = React; var styles = StyleSheet.create({ height: (Platform.OS === 'ios') ? 200 : 100, });    
Read more...

react-navie学习之hello world

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目录,不是管理工具那个缓存目录。然后成功,其他也可以这么下载。 安装加速器/extras/intel/Hardware_Accelerated_Execution_Manager/IntelHAXM.dmg,检查安装 kextstat | grep intel 163 0 0xffffff7f82e39000 0x14000 0x14000 com.intel.kext.intelhaxm (6.0.1) 8FF2C637-0A5E-367E-B007-5B08655B1E8A <7 5 4 3 1> 运行模拟器emulator -avd 卸载 模拟器,sudo /System/Library/Extensions/intelhaxm.kext/Contents/Resources/uninstall.sh ./emulator -list-avds 没有 ./android avd 点击create创建一个设备,也可以在这里直接点start启动模拟器。 react-native run-android 开始需要安装依赖库,麻痹又是网络不能连接,都是安装网络原因费劲。配置项目,Android目录下的gradle.properties。添加 systemProp.http.proxyHost=127.0.0.1 systemProp.http.proxyPort=8087 systemProp.https.proxyHost=127.0.0.1 systemProp.https.proxyPort=8087 然后提示证书不行,导入代理证书还是不行,, 最后修改vim android/gradle/wrapper/gradle-wrapper.properties,吧下载连接https改成http,然后重新run-android就好了。真曲折,查的过程中发现这个也可以使用离线下载的方式。 卧槽 又报错,日了狗了。 Could not GET 'https://jcenter.bintray.com/com/android/tools/build/gradle/1.3.1/gradle-1.3.1.pom'. > peer not authenticated 发现能直接访问,然后把之前修改的代理配置注释掉就好了。。 然后提示“failed to find Build Tools revision 23.0.1” ,发现是装错版本了,最新23.0.2,必须要23.0.1.。 重新安装好了。 官网说开启Gradle Daemon能加快编译。这个也没太大必要,就不搞了。 然后成功编译运行,模拟器里提示“unable to download js bundle from the dev server”,网上都是实机的问题。 我重启模拟器好了。 麻痹 泪奔 安卓安装个东西好麻烦,需要各种翻墙。
Read more...

react学习--hello world

需要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了。
Read more...

1