react native

环境配置

安装 react-native
npm install -g react-native-cli

初始化项目,并安装依赖包
react-native init first

cd first
react-native run-android

安装 java JDK 
安装 android SDK   
    设置代理 proxy  
        mirrors.neusoft.edu.cn
        80
        Use download cache
        Force https://... sources to be fetched using https://...
        Enable Preview Tools 
        
    需要安装 Tools  文件夹下的 Android SDK Build-tools 23.0.1
    需要安装 Extras 文件夹下的 
    Android Support Repository 
    Android Support Library
    Google USB Driver

连接手机，打开usb调试，或者安排  genymotion模拟器


genymotion
gyz418
418gyz418gyz
使用API 19 
设置 adb 的 android sdk 为 本地sdk路径

-------- 点击模拟器，按键盘RR 可以实时刷新 

webstorm 设置 rn
语言为 react jsx 
Languages-> JavaScript-> Library-> Download... 
在列表中下载 react react-native

webstorm 添加 rn 智能提醒
file -> import settings -> ReactNative.jar
地址： https://github.com/virtoolswebplayer/ReactNative-LiveTemplate

 基本语法

var url = ''; // 变量也可以写在这里。。。
export default class first extends Component{
    constructor(){  // 构造方法
        this.state={title:'abc'}
    
    }
    test () {} // 其他方法 
    render() { // render() 方法 
        var a = [{title:'movie title',year:2016}];; // js 写在这里
        return (
            <View style={styles.container}>       // 最外层只能有一个View 样式用大括号
                <Text>{movie[0].title}</Text>   // 加大括号 {}
                <Image source={{uri:movie[0].posters.thumbnail}}></Image>   //  双大括号{{...}}
            </View>
        )
    }
}

// 样式
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});


flex flex-direction 默认是横排
rn    flexDirection 默认是竖排  没有 border的css属性


this.setState({name:'abc'})  // setState()方法传入一个对象

 movie3.0.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ListView
} from 'react-native';

var movieUrl = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

export default class first extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
    // 在ES6中，如果在自定义的函数里使用了this关键字，则需要对其进行“绑定”操作，否则this的指向不对
    // 像下面这行代码一样，在constructor中使用bind是其中一种做法（还有一些其他做法，如使用箭头函数等）
    this.fetchData = this.fetchData.bind(this);
  }

  /* react 组件加载完，调用，只调用一次*/
  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch(movieUrl)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
          loaded: true,
        })
      })
  }

  render() {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }
    return (
      <ListView dataSource={this.state.dataSource} renderRow={this.renderMovie} style={styles.listView}/>
    )

  }

  renderLoadingView() {
    return (
      <View style={styles.container}>
        <Text>
          正在加载电影数据...
        </Text>
      </View>
    )
  }

  renderMovie(movie) {
    return (
      <View style={styles.container}>
        <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail}/>
        <View style={styles.rightContainer}>
          <Text style={styles.title}>{movie.title}</Text>
          <Text style={styles.year}>{movie.year}</Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    flexDirection: 'row', /* 默认为竖排，改为横排*/
  },
  thumbnail: {
    width: 53,
    height: 81,
    backgroundColor: '#0000ff',
    marginLeft: 15
  },
  rightContainer: {
    flex: 1,
    marginBottom: 8,
  },
  title: {
    textAlign: 'center',
    marginBottom: 8,
    fontSize: 20,
  },
  year: {
    textAlign: 'center',
  },
  listView: {
    paddingTop: 20,
    backgroundColor: '#F5FCFF',
  }
});

AppRegistry.registerComponent('first', () => first);

 语法二

npm 配置
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global 


/* 最简组件 */
class Myprops extends Component{
  render(){
    return(
      <View>
        <Text>abc,{this.props.name}</Text>
      </View>
    )
  }
}

export default class first extends Component {
    constructor(){    // 构造函数
        this.fetchData = this.fetchData.bind(this);
        // 在ES6中，如果在自定义的函数里使用了this关键字，则需要对其进行“绑定”操作，否则this的指向不对
    }
    
    /* react 组件加载完，调用，只调用一次*/
    componentDidMount() {
        this.fetchData();
    }
    fetchData () {    // fetchData()方法
        ...
    }
    render(){       // render() 方法
        if(...){
            return this.renderLoadingView();  // 调用界面方法 
        } 
        //组件调用,传参
        <Myprops name="kang"/>
    }
    
    renderLoadingView() {
        return (
            <View>
                <Text style={{backgroundColor:'red'}}>abc</Text>  // 直接行内样式要双括号 
            </View>
        )
    }
}


const styles = StyleSheet.create({       /* StyleSheet 注意大写*/
  container: {
    flex: 1,
    // justifyContent: 'center',
    alignItems: 'center',    /* 默认flexDirection: column x y 轴的属性变了 这个是 水平居中*/
    backgroundColor: '#F5FCFF',
  },

});

 布局 两按钮

import React, {Component} from 'react';
import {
  Dimensions,
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
const {width} = Dimensions.get('window')

export default class first extends Component {
  render() {
    return (
      <View style={styles.kangView}>
        <TouchableOpacity style={[styles.kangBtn, styles.red]}>
          <Text style={styles.kangText}>btn1</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[styles.kangBtn, styles.blue]}>
          <Text style={styles.kangText}>btn2</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  kangView: {
    flexDirection: 'row',
    justifyContent:'space-between', // 两端对齐
    paddingHorizontal:15,
  },
  kangBtn: {
    height: 43,
    width: (width - 45) / 2,  //
    justifyContent: 'center'  ,
    alignItems: 'center',
  },
  red: {
    backgroundColor: "#f00",
  },
  blue: {
    backgroundColor: "#00f",
  },
  kangText: {
    color: '#fff',
  }
});

AppRegistry.registerComponent('first', () => first);