ReactNative 知识点整理(1)

1.如何创建一个轮播view，点击事件绑定，自动播放和手动播放？列出具体步骤

先安装三方控件

npm i react-native-swiper –save

导入Swiper

var Swiper = require(‘react-native-swiper');

构建视图

render() {
        return (
            <Swiper height={220} autoplay={true}>
                    {this.renderImg()}
            </Swiper>
        );
}

绑定点击事件

renderImg(){
        var imageViews=[];
        let images = this.props.imagesData;
        for(let i=0;i<images.length;i++){
            imageViews.push(
                <View key={'banner'+i} style={{flex:1,justifyContent: 'center'}}>
                    <TouchableOpacity  style={{flex:1}}  onPress={()=>{
                            YFWToast('点击轮播图'+i);
                    }}>
                            <Image
                                style={{flex:1}}
                                source={{uri:images[i].img_url}}
                            />

                    </TouchableOpacity>
                </View>

            );
        }
        return imageViews;
}

补充
定义i 时需使用let , 如果使用var 来定义，点击事件i 会显示最后一个值
因为var 和 let 作用域不同
var定义的变量可以修改
let是块级作用域，函数内部使用let定义后，对函数外部无影响。

也可以用ES5的绑定事件方式
onPress={()=>{this.itemClick.bind(this,index)}}

.
.

2.如何创建一个请求并接收到放回的数据？

1. 参数添加callBack函数回调

fs.readFile(fileA, 'utf-8', function (err, data) {
  fs.readFile(fileB, 'utf-8', function (err, data) {
    // coding ...
  });
});

2.创建Promise 对象，执行.then()实现回调
将嵌套式callBack 改为链式

var readFile = require('fs-readfile-promise');

readFile(fileA)
.then(function (data) {
  console.log(data.toString());
})
.then(function () {
  return readFile(fileB);
})
.then(function (data) {
  console.log(data.toString());
})
.catch(function (err) {
  console.log(err);
});

3. 用Generator 函数，执行等待结果

var gen = function* (){
    var f1 = yield readFile('/etc/fstab');
    var f2 = yield readFile('/etc/shells');
    console.log(f1.toString());
    console.log(f2.toString());
};

4. 用async , await 方式，原理与Generator 函数相同

async function gen (){
    var f1 = await readFile('/etc/fstab');
    var f2 = await readFile('/etc/shells');
    console.log(f1.toString());
    console.log(f2.toString());
};

.
.

3.创建一个listview，需要实现的接口方法有哪些，如何给listview的itemview绑定数据，itemview的点击事件处理?

设置state

constructor(props) {
        super(props);
        this.state = {
            loading: true,
            data: [],
            dataSource: new ListView.DataSource({ rowHasChanged: (r1,                       r2) => r1 !== r2 }),
            index: 2
        };
}

添加ListView控件

render() {
    return (
            <View style={styles.container}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow = {this.renderRow.bind(this)}
                />
            </View>
    );
}

设置Cell样式

renderRow(rowData,sectionID,rowID,highlightRow){
    return(
        <View>
            <TouchableOpacity  style={{flex:1}}     onPress={this.selectItemIndex.bind(this,sectionID,rowID)}>
                <View style={styles.item}>
                    <HomeBarner imagesData={rowData.items}/>
                </View>
                <View style={styles.item} height={50}>
                    <Text style={styles.text}>MainVC!</Text>
                </View>
            </TouchableOpacity>
        </View>
        )
    coding…     
}

设置点击事件

selectItemIndex(sectionID,rowID){
        YFWToast('sectionID:'+sectionID+',rowID:'+rowID);
}

数据请求

componentDidMount(){
        let request = new Request();
        let paramObj = new RequestParam();
        let paramMap = new Map();
        paramMap.set('service','get_index_data');
        var url = paramObj.getURL(paramMap);
        request.geturl(url,null).then((res)=>{
            if (res.code === '1'){
                let data = res.data_items;
                this.setState({
                    data:data,
                    dataSource: this.state.dataSource.cloneWithRows(data)
                });
            }
        });
}

补充

state 和 props 区别

state 和 props 都可以当做属性来存储当前页面的数据
state类似于私有属性，用于文件内的状态设置
props类似于公有属性，多用于页面传值
取值时：this.state.index
赋值时：this.setState({ index : 5 })

.
.

4. export， async，await，default，extends这些关键字的含义和用法。

export : 导出组件或方法
async :async函数使得异步操作变得更加方便-Generator 函数的语法糖
await:等待函数执行完成，替换Generator 函数中的yield
default : 默认接口，一个文件中只能有一个
extends : 继承父类

补充

何为Generator 函数

定义：ES6 提供的一种异步编程解决方案
用法：

function* helloWorldGenerator(){
   yield ‘hello’;
   yield ‘world’;
   return ‘ending’;
}

特点：
a. 函数以 function* 开始
b. 函数内部 包含 yield关键字 ，yield 表达式可以暂停Generator 函数的执行，然后（用next()语法）可以从暂停的地方回复执行。
c. 执行 Generator 函数会返回一个遍历器对象（可以遍历函数内部的每一个状态）
Async 替换 Generator 函数

async function myFunction() {
  try {
      await somethingThatReturnsAPromise();
  } catch (err) {
      console.log(err);
  }
}

.
.

5.如何创建一个工具类供外部调用，列出私有方法和共有方法的表示方式。

1. 直接导出方法

exports.backGroundColor = function () {
    return '#F5F5F5';
}

2. 导出工具类

export default class YFWRequestParam{
    coding …
}

3.类中的所有方法都是对外可见的，所以私有方法可以写在类外

class A {
    function publickF(){
    }
}
//_privateF 命名前加_ 只是方便区分，没有实质含义
function _privateF(){
}

6. 列出注释的几种形式。

/*   注释内容   */
{/*  标签内部注释时使用  */}