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.如何创建一个请求并接收到放回的数据？
- 参数添加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);
});
- 用Generator 函数，执行等待结果
var gen = function* (){
var f1 = yield readFile('/etc/fstab');
var f2 = yield readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
- 用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.如何创建一个工具类供外部调用，列出私有方法和共有方法的表示方式。
- 直接导出方法
exports.backGroundColor = function () {
return '#F5F5F5';
}
- 导出工具类
export default class YFWRequestParam{
coding …
}
3.类中的所有方法都是对外可见的，所以私有方法可以写在类外
class A {
function publickF(){
}
}
//_privateF 命名前加_ 只是方便区分，没有实质含义
function _privateF(){
}
6. 列出注释的几种形式。
/* 注释内容 */
{/* 标签内部注释时使用 */}
