first commit

linsir6 · linsir6 · commit 44d80684fbec · 2017-07-04T08:44:44.000+08:00
diff --git a/README.md b/README.md
@@ -1,2 +1,41 @@
 # ReactNativeNote
-记录一些在学习ReactNative过程中遇到的问题和它们的解决方案
+
+[![Travis](https://img.shields.io/badge/build-passing-brightgreen.svg)](https://github.com/linsir6) [![License](https://img.shields.io/badge/license-Apache%202-4EB1BA.svg)](https://www.apache.org/licenses/LICENSE-2.0.html) [![GitHub (pre-)release](https://img.shields.io/badge/release-v1.0.0-ff69b4.svg)](https://github.com/linsir6/Android-Notes/releases) [![User](https://img.shields.io/badge/user-linsir-yellow.svg)](https://github.com/linsir6)
+
+
+## ReactNative
+
+- [ReactNative入门](/ReactNative相关/ReactNative入门.md)
+- [短信验证码倒计时控件](/ReactNative相关/短信验证码倒计时控件.md)
+- [ReactNative报错记录](/ReactNative相关/ReactNative报错记录.md)
+
+----
+
+# Getting Help
+
+To report a specific problem or feature request, open a new issue on Github. For questions, suggestions, or anything else, email linsir678@gmail.com.
+
+
+
+# Author
+
+关玮琳linSir - @[linsir6](https://github.com/linsir6) on GitHub, @[linsir.top](http://linsir.top)
+
+# License
+
+Copyright 2017 linsir
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
+
+[http://www.apache.org/licenses/LICENSE-2.0](http://www.apache.org/licenses/LICENSE-2.0)
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+
+
+
+# PS
+**已经看到这里啦，不妨给个star~**
+
+![](/AndroidNote/img/background.jpg)
+
+
diff --git a/ReactNative相关/ReactNative入门.md b/ReactNative相关/ReactNative入门.md
@@ -0,0 +1,72 @@
+# ReactNative入门
+
+## 简介
+
+ReactNative旨在开发过程的高效，它具有一些原生App所不具备的优势，它的跨平台性非常强，代码的复用程度非常的高，并且可以具有热更新的能力，其次就是它的社区也在日趋的强大起来。
+
+## 为什么选择ReactNative
+
+纵观国内的比较大的厂商并没有完全的转移到React Native，但也没有完全的排斥说不搞React Native，所以学习这样一个新的技能对我们有百利而无一害，在学习React Native的过程中，我们也会接触到React这样一个新的UI方案，同时对一些ES6，ES7新的特性也都会有接触，总体感觉还不错～
+
+## 入门
+
+学习React Native最好还是要有一些React JavaScript 以及原生应用的开发经验，当然没有也无妨，慢慢一步一步的来嘛。
+
+**目前我介绍的是针对Android端介绍的，后续也会把Ios相关的内容补上。**
+
+需要有的软件:
+
+- Node.js
+- Android studio
+- Watchman
+
+运行：
+
+```
+react-native init AwesomeProject
+cd AwesomeProject
+react-native run-android
+```
+
+## 知识点
+
+**项目的入口:** index.android.js / index.ios.js
+
+**视图呈现:**
+
+```
+render() {
+    return (
+      <View style={cStyles.container}>
+        <View style={styles.row}>
+          <Text style={styles.label}>AAA</Text>
+          <View style={styles.rowCount}>
+            <Text style={styles.countUnit}>BBB/Text>
+            <Text style={styles.price}>CCC</Text>
+          </View>
+        </View>
+        <LinkRow label="DDD" onPress={() => {
+        }}/>
+        <LinkRow label="EEE" onPress={this.logout}/>
+      </View>
+    );
+  }
+```
+
+我们的视图需要写在return()下面，并且这个下面只能有一个根View
+
+**抽出公共控件:**
+
+在界面中，可能我们有很多控件是可以复用的，如果我们不把它们抽出来的话，可能就会导致代码的臃肿，并且不是很利于维护，所以我们应该将公共部分抽出来。
+
+**将公用的style抽象出来**
+
+同上
+
+## 推荐编译器
+
+- 需要测试性能的时候需要使用Android studio
+- 与性能无关时，编写代码时还是推荐使用WebStorm编写代码
+
+
+好了，就先介绍到这里吧，在等到我有时间的时候，可以介绍一下，手写一个tab，或者实现登录注册的全部逻辑(包含网络框架)。
diff --git a/ReactNative相关/ReactNative报错记录.md b/ReactNative相关/ReactNative报错记录.md
@@ -0,0 +1,43 @@
+# React-Native 报错记录
+
+- ``xxx is not defined``
+    
+    例如：``Component is not defined``
+    错误原因：在当前的js文件中没有定义或者没有引入这个组建，并且有调用的地方
+    
+- ``JSX attributes must only assigned a non-empty expression(29:28)``
+    
+    错误原因：这个报错就非常简单了，已经告诉我们在哪一行了，错误原因就是，定义了之后不能为空
+    
+- ``Cannot read property 'Aspect' of undefined``
+
+    错误原因：没有在当前文件夹下运行``react-native start``,导致一些关键的东西引入不进来
+
+- ``undefined is not an object(evaluating 'Daily_Service.props.navigation')``
+
+    错误原因：一般来说，我们这样写了代码，就是因为我们认为，可以用this,或者用到某个对象的时候，但是它本身是调用不了的。
+
+
+- ``java.lang.illegalStateException:WebSocket connection no longer valid``
+
+    错误原因，``react-native start``命令执行之后意外中断了
+    
+   
+
+
+
+
+
+- ``在View添加了onPress，但是在点击的时候，不会产生任何效果``
+
+    错误原因：View没有这样的方法，当遇到需要这样操作的方法的时候可以加入``<TouchableOpacity>  </TouchableOpacity>``
+    
+    
+
+
+    
+    
+    
+    
+
+
diff --git a/ReactNative相关/test.js b/ReactNative相关/test.js
diff --git a/ReactNative相关/短信验证码倒计时控件.md b/ReactNative相关/短信验证码倒计时控件.md
@@ -0,0 +1,164 @@
+# ReactNative短信验证码倒计时控件
+
+## 功能
+
+根据项目的需要，需要写一个自定义的控件，实现如下功能：
+
+- 默认文字为**点击获取验证码**
+- 点击后出现60秒的倒计时
+- 颜色，字号可调
+- 倒计时过程中，再次点击需要忽略掉
+- 倒计时完成后文本恢复成**点击获取验证码**
+- 再几次点击同之前
+
+
+其实说了这么多，就是个最普通的验证码的功能。。。
+
+## 效果
+
+效果图如下：(录的图片比较一般，对付着看吧)
+
+![](https://ws2.sinaimg.cn/large/006tNc79ly1fh1x98k8h0g306w01oglo.gif)
+
+## 实现原理
+
+自己封装了个控件，它内部含有一个Text控件，然后我们又写了一个timer，然后负责倒计时，然后每次都需要判断一下是否继续，然后加了一个flag字段，判断是否接受下次点击事件，当倒计时结束之后还需要将初始状态重置回去即可。
+
+## 代码
+
+### 控件代码
+
+```
+import React, {Component  } from 'react';
+import {
+    StyleSheet,
+    Text,
+    View,
+    Image,
+    TextInput,
+    TouchableHighlight,
+    StatusBar,
+    Alert,
+    AppRegistry
+} from 'react-native';
+import LinkRow from '../components/LinkRow';
+import cStyles from '../styles/CommonStyle';
+
+import axios from 'axios';
+
+class MyCountTime extends Component {
+    constructor(props) {
+        super(props);
+        let timeLeft = this.props.timeLeft > 0 ? this.props.timeLeft : 5;
+        let width = this.props.width || 100;
+        let height = this.props.height || 50;
+        let color = this.props.color || '#42A5F5';
+        let fontSize = this.props.fontSize || 30;
+        let fontWeight = this.props.fontWeight || '600';
+        let borderColor = this.props.borderColor || '#42A5F5';
+        let borderWidth = this.props.borderWidth || 1;
+        let borderRadius = this.props.borderRadius || 4;
+        let backgroundColor = this.props.backgroundColor || '#42A5F5';
+        let begin = 0;
+        let press = this.props.press;
+
+        this.afterEnd = this.props.afterEnd || this._afterEnd;
+        this.style = this.props.style;
+
+        this.state = {
+            timeLeft: timeLeft,
+            begin: begin
+        };
+        this.countTextStyle = {
+            textAlign: 'center',
+            color: '#42A5F5',
+            fontSize: fontSize,
+            fontWeight: fontWeight
+
+        };
+        this.countViewStyle = {
+            backgroundColor: backgroundColor,
+            alignItems: 'center',
+            borderColor: borderColor,
+            borderWidth: borderWidth,
+            borderRadius: borderRadius,
+            width: width,
+            height: height
+        }
+    }
+
+    countdownfn(timeLeft, callback, begin) {
+        if (timeLeft > 0) {
+            this.state.begin = 1;
+            console.log("===lin===>");
+
+            let that = this;
+            let interval = setInterval(function () {
+                if (that.state.timeLeft < 1) {
+                    clearInterval(interval);
+                    callback(that)
+                } else {
+                    let totalTime = that.state.timeLeft;
+                    that.setState({
+                        timeLeft: totalTime - 1
+                    })
+                }
+            }, 1000)
+        }
+    }
+
+    _beginCountDown() {
+        if (this.state.begin === 1){
+            return;
+        }
+        let time = this.state.timeLeft;
+        console.log("===lin===> time " + time);
+        let afterEnd = this.afterEnd;
+        let begin = this.state.begin;
+        console.log("===lin===> start " + begin);
+        this.countdownfn(time, afterEnd, begin)
+    }
+
+    _afterEnd(that) {
+        console.log('------------time over');
+        that.setState({
+            begin : 0,
+            timeLeft : 5,
+        })
+    }
+
+    componentDidMount() {
+
+    }
+
+    render() {
+        return (
+            <View style={{position:'absolute',top:13,right:43,height:30}}>
+                <Text
+                    onPress={this._beginCountDown.bind(this)}
+                    style={{color: '#42A5F5', fontSize: 17,height:40 , zIndex:999}}> { this.state.begin === 0 ? '点击获取验证码' : this.state.timeLeft} </Text>
+
+            </View>
+        )
+    }
+}
+
+```
+
+### 应用代码
+
+```
+<MyCountTime timeLeft={5}>
+
+</MyCountTime>
+
+```
+
+
+当然这只是，最简单的应用的代码，我们还提供了很多的自定义的属性，大家可以根据自己项目的需要，去调节这些参数。
+
+----
+
+由于最近刚开始认真的搞RN，可能有一些封装的不是最佳实践，还是希望大家多提意见，和大家一起进步吧。
+
+
