廢話不多說(shuō)看代碼
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
ListView,
ToastAndroid,
ToolbarAndroid,
DrawerLayoutAndroid,
Dimensions,
} from 'react-native';
var page = 1;
var REQUEST_URL = 'http://gank.io/api/data/Android/10/' + page;
//引入歡迎界面
var SplashScreen = require('./js/SplashScreen');
//引入返回圖標(biāo)
var back_bg = require('./img/back.png');
//存放返回的數(shù)據(jù)的數(shù)組
var movieData = new Array();
class RnDemo extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
loaded: false,
};
}
//界面開(kāi)始加載獲取數(shù)據(jù)
componentDidMount() {
this.fetchData(REQUEST_URL);
}
//接受請(qǐng)求成功的回調(diào)的結(jié)果
onResoutData(responseData) {
var concat = movieData.concat(responseData.results);
movieData = concat;
this.setState({
dataSource: this.state.dataSource.cloneWithRows(movieData),
loaded: true,
});
}
render() {
//如果是第一打開(kāi)加載就先打開(kāi)歡迎界面
if (!this.state.loaded) {
return (
<SplashScreen />
);
}
//初始化側(cè)邊欄
return this.renderDrawableView();
}
//打開(kāi)側(cè)滑欄
onPenLeftDrawable() {
this.drawer.openDrawer();
}
//加載網(wǎng)絡(luò)數(shù)據(jù)
fetchData(REQUEST_URL) {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.onResoutData(responseData)
})
}
//監(jiān)聽(tīng)滑動(dòng)到底部
loadmore() {
page++;
var REQUEST_URL = 'http://gank.io/api/data/Android/10/' + page;
this.fetchData(REQUEST_URL);
}
//返回側(cè)滑欄
renderDrawableView() {
//側(cè)滑列表顯示的布局
var navigationView = (
<View style={{flex: 1, backgroundColor: 'blue'}}>
<Text style={{margin: 10,color:'#fff',fontSize: 15, textAlign: 'center'}}>我是導(dǎo)航功能欄標(biāo)題</Text>
<Text style={{marginTop: 10,marginLeft:20,color:'#fff',fontSize: 15, textAlign: 'left'}}>1.功能1</Text>
<Text style={{marginTop: 10,marginLeft:20,color:'#fff',fontSize: 15, textAlign: 'left'}}>2.功能2</Text>
</View>
);
return (
<DrawerLayoutAndroid
ref={(drawer) => { this.drawer = drawer; }}
drawerWidth={Dimensions.get('window').width / 5 * 3}
drawerPosition={DrawerLayoutAndroid.positions.left}
//這個(gè)是加載側(cè)邊劃出的布局
renderNavigationView={() => navigationView}
>
<View style={styles.container2}>
<ToolbarAndroid //標(biāo)題欄
navIcon={back_bg}
onIconClicked={this.onPenLeftDrawable.bind(this)} //左上角打開(kāi)側(cè)劃?rùn)邳c(diǎn)擊方法
titleColor='#ffffff' //只支持RGB數(shù)值坟岔，設(shè)置標(biāo)題的字體顏色
style={styles.toolbar}
title="Android資源列表"></ToolbarAndroid>
<ListView
initialListSize={1}
onEndReachedThreshold={10}
dataSource={this.state.dataSource}
renderRow={this.renderMovie}
onEndReached={this.loadmore.bind(this)}
style={styles.listviewstyle}
/>
</View>
</DrawerLayoutAndroid>
);
}
//顯示干活數(shù)據(jù)的具體邏輯
renderMovie(results) {
return (
<View style={styles.container}>
<Image
source={{uri: results.url}}
style={styles.thumbnail}
/>
<View style={styles.rightContainer}>
<Text style={styles.title}>{results.desc}</Text>
<Text style={styles.year}>{results.createdAt}</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
toolbar: {
backgroundColor: 'blue',
height: 56,
},
container2: {
flex: 1,
flexDirection: 'column', //豎直按順序從上往下排列
},
container: {
flexDirection: 'row', //按順序從左往右排列
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
thumbnail: {
width: 53,
height: 81,
},
rightContainer: {
flex: 1,
},
title: {
fontSize: 20,
marginBottom: 8,
textAlign: 'center',
},
year: {
textAlign: 'center',
},
listviewstyle: {
paddingTop: 20,
backgroundColor: '#F5FCFF',
},
});
AppRegistry.registerComponent('RnDemo', () => RnDemo);
Paste_Image.png
這里我遇到的疑問(wèn)就是：
ref={(drawer) => { this.drawer = drawer; }}，這個(gè)什么意思摔桦？ref哪來(lái)的社付？
現(xiàn)在我就來(lái)回答：
- 這句話的意思就是將drawer的對(duì)象賦值給drawer
- ref是什么你可以簡(jiǎn)單的理解為是一個(gè)關(guān)鍵字,用它可以保存任何的方法和取值
