ReactNative电影笔记

#### 初始化--运行
react-native init rn_douban
react-native run-android
查看设备--adb devices
重新打开调试页面react-native start
解决不能连接手机
1. 是否打开USB调试（开发者模式）
2. 安装手机驱动（豌豆荚工具）
3. 手机摇一摇--点击Reload刷新代码
4. 点击Enable Hot Reloading  开启热更新

#### index.js首页
/**
 * 从ReactNative的包中，导入AppRegistry组件，他的作用，就是注册项目首页的
 */

import {AppRegistry} from 'react-native';

### 组件
本地资源
<Image source={require('./images/..jpg')}></Image>
网上资源-要设置宽高
<Image source={{url:'http://'} style={{width:200,height:160}}></Image>
在Button按钮中，title属性和onPress属性是必须的，onPress表示点击按钮，要触发的操作
<Buttton></Button>
如果使用animating隐藏loading效果，知识让他不可见了，但是区域还在
<ActivityIndicator color="red" size="large" animating={false}>

### 安装git 上底部切换栏组件
yarn add react-native-tab-navigator

重新启动
react-native start

// 导入 Tabbar 相关的组件
import TabNavigator from 'react-native-tab-navigator'

#### home.js
import React, {Component} from 'react'
import {View, Text} from 'react-native'

export default class Home extends Component{
    render(){
        return <View>
            <Text>这是HOme组件</Text>
        </View>
    }
}
#### 添加图标插件
yarn add react-native-vector-icons
配置---可打开图标网站有哪些图标
1. 打开android/app/build.gradle
2. /* 配置第三方图标 */
project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf', 'FontAwesome.ttf' ] // Name of the font files you want to copy
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

3. 将node_modules/react-native-vector-icons/Fonts下的文件
复制到--android/app/src/main/assets/fonts（文件名都是小写，没有就创建）

4. 编辑android/settings.gradle文件
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

5. 编辑android\app\build.gradle


dependencies {

    compile project(':react-native-vector-icons')
}
6. 编辑android\app\src\main\java\com\rn_douban2\MainApplication.java
import com.oblador.vectoricons.VectorIconsPackage;
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new ImagePickerPackage()
          , new VectorIconsPackage() //  添加
      );
    }

    <!-- 最新版 -->
            @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          packages.add( new VectorIconsPackage());
          return packages;
        }

### 注意：
1. 当修改了项目根目录中，Android目录下的任何文件之后，如果想要安开项目效果，不要使用react-native start
而是需要再一次编译安装一下项目，运行react-native run-android
2. 引入图片插件后--第一次运行会报错
打开SKD Android安装目录---Manager.exe
Not installed 26.0.1   勾选
install--License--Accept License勾选



### 引入轮播图
 npm i react-native-swiper --save
// 导入轮播图组件
import Swiper from 'react-native-swiper'
import { AppRegistry, StyleSheet, Text, View } from 'react-native'
使用：

const styles = StyleSheet.create({
  wrapper: {},
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB'
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5'
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9'
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  }
})
 {/* 轮播图的结构 */}
      {/* 在 轮播图的 Swiper 组件外面，需要套一层 View，给这个 View 需要手动设置一个高度 */}
      <View style={{ height: 220 }}>
      <!-- autoplay={true} 是否自动播放，loop={true}循环播放-->
        <Swiper style={styles.wrapper} showsButtons={true}>
            <View style={styles.slide1}>
                <Text style={styles.text}>Hello Swiper</Text>
            </View>
            <View style={styles.slide2}>
                <Text style={styles.text}>Beautiful</Text>
            </View>
            <View style={styles.slide3}>
                <Text style={styles.text}>And simple</Text>
            </View>
        </Swiper>
 </View>    

 ### 打印请求的数据 JSON.stringify(data,null,'  ');
 在手机端调试(native环境)不存在跨域
 componentWillMount(){
     fetch('http://vue.studyit.io/api/getlunbo')
     .then(res=>res.json())
     .then(data=>{
         // 格式化
         console.warn(JSON.stringfy(data.null,'  '))
     })
 }

 注意：图片请求要用uri
  <Image source={{ uri: item.img }} style={{ width: '100%', height: '100%' }}></Image>

### 第三方插件--路由跳转
react-native-router-flux

将Mian.js作为根组件
### 点击-跳转
View标签没有点击事件，要用TouchableHighlight元素包裹起来；
注意：内部只能放置一个唯一的元素，不能放两个<View>
点击事件：onPress
点击状态：underlayColor  点击的背景色
<TouchableHighlight onPress={this.goMovieList}>
<View></View>
</TouchableHighlight>

goMovieList = () => {
  <!-- 在这里要跳转到电影列表，需要使用编程式导航 Actions.key值（{要传递的值}）-->
  Actions.movielist({id: 10})
}

<!-- Actions表示要进行路由的js操作，可以跳转到新路由 -->
import { Actions } from 'react-native-router-flux'

### Promise对象
代表异步操作，有三种状态
 pending(进行中)；
 Resolved(已完成，又称Fulfilled)和Rejected(已失败)；

 resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

 const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

实例：
movieService.js
getMovieListData(){
  const url = '请求地址'
  return new Promise(function(resolve, reject) {
    fetch(url)
      .then((response) => {
        if(response.ok) {
          return response.json()
        } else {
          console.error('服务器繁忙，请稍后再试：\r\nCode:'+response.status)
        }
      })
      .then((data) => {
        resolve(data)
      })
      .catch(err)=>{
        reject(err)
      }
  });
}

<!-- 数据请求访问 -->
fetch=()=>{
  const promise = service.getMovieListData();
  promise.then(
    function (data) {
      console.log(data)
    },
    function (err){}
  ).catch(function (err) {

  })
}

### 发布
1.生成密匙；
2.将生成的密匙文件放到android/app目录下
3.编辑./gradle/gradle.properties文件或../android/gradle.properties