原生app__react-native开发环境以及项目搭建总结

1. react-native

学习官网
中文官网

1.1 需要的开发环境

• 开发出来是原生的App
• jdk,sdk,node git
• python : 环境变量: C:\Python27
• 还要求sdk中折build-tools是23.0.1版本。

  1.2 安装react-native-cli

• 命令：npm install -g react-native-cli
• 使用时直接使用react-native 不要加-cli
• 查看版本: react-native --version

1.3 初始化一个基本的项目结构

• 命令：react-native init testApp
• 这里的testApp是项目目录名。（这个过程比较耗时）
• 项目中会用一个index.android.js这是android平台对应的入口文件
• 还有一个index.ios.js 这是ios平台对应的入口文件

1.4 运行

• react-native run-android
• react-native run-ios
• 在testApp这个目录执行命令

图片Image组件

- 使用本地图片
    `<Image source={require('./tmp/sc.jpg')}/>`
- 如果指定的是一个网络图片，一定要指定宽高
    `<Image source={{uri:'http://www.jpg'}} style={{width:200,height:400}}/>`
- 可以当作背景图使用:
     要使用双标签的形式
     `<Image source={{uri:'http://xxx.jpg'}}><Text>我是小明</Text></Image>`

- 这样：sc2.android.jpg
    * 如果在文件名与后缀中间加上.android,那么这个文件是由android平台使用
    * 使用时不需要加上.android,直接使用sc2.jpg
    * 如果是ios也是如此类比

TextInput

• onChangeText事件

样式

• 所有的样式都是用style属性，这些样式名基本上是遵循了web上的CSS的命名，
  只是按照JS的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
      </View>
    );
  }
}
//像素不用加，驼峰命名法
const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});
AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);

ListView组件

• ListView组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。

• ListView更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，ListView并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。

• ListView组件必须的两个属性是dataSource和renderRow。dataSource是列表的数据源，而renderRow则逐个解析数据源中的数据，然后返回一个设定好格式的组件来渲染。

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

export default class testApp extends Component {
  constructor() {
    super()
    const ds = new ListView.dataSource({rowHasChanged:(r1,r2)=>{r1!==r2}})
    this.state = {
      dataSource:ds.cloneWithRows(['小明','小红','Tom','Joke','Lily'])
    }

  }
  render() {
    return (
      <View>
        <ListView
        dataSource ={this.state.dataSource}
        renderRow= {this.renderRow}
         />
      </View>
    );
  }
  renderRow(rowData){
      return (
        <Text>{rowData}</Text>
        )
  }
}


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