前言
FaltList是ReactNative中使用频率比较高的组件，react-navigation是官方主推的导航库，最近稍微写了一些例子，在此做一下记录及分享。
FlatList的使用
官方有给出具体的代码，这里主要贴下我自己写的代码
渲染组件
<View style={styles.container}>
<FlatList
data = {this.state.movies}
renderItem = {this.renderItem.bind(this)}
keyExtractor = {(item) => item.id}
ItemSeparatorComponent = {this.renderLineView}
refreshing = {this.state.refreshing}
onRefresh = {this.handRefresh.bind(this)}
/* 加载下一页
onEndReachedThreshold={0.5}
onEndReached={this.handRefresh.bind(this)}
*/
/>
</View>
渲染item
renderItem = (item) => {
return(
<TouchableOpacity style={styles.items} onPress={this.jumpToDetail.bind(this, item.item.title)}>
<View style={styles.center}>
<Text style={styles.font}>{item.item.title}</Text>
</View>
</TouchableOpacity>
);
}
网络请求
loadList() {
let url = 'https://api.douban.com/v2/movie/coming_soon?city=北京';
fetch(url)
.then(response => response.json())
.then(responseData => {
console.log('>>>>the data is'+responseData.subjects);
let moviesData = [];
for(let i in responseData.subjects) {
let movieItem = responseData.subjects[i];
console.log('the title is'+movieItem.title);
moviesData.push(movieItem);
}
console.log('>>>>the movies is'+moviesData)
this.setState({
movies: moviesData,
refreshing: false,
});
}).catch(error => {
console.error('>>>the error is'+error);
});
}
下拉刷新
handRefresh = () => {
this.setState({
refreshing: true,
movies: [],
}, () => {
this.loadList();
});
}
基本使用的话只需要实现data和renderItem相关方法即可，至于其他属性及方法官方文档都有说明，我这里实现了下拉刷新以及分割线等方法，数据也是从API获取的。不过个人感觉官方的下拉刷新有点别扭，我Demo里有写了第三方的下拉刷新的页面，如果感兴趣可以下载看看。
react-navigatin 使用
react-navigation 官方也有很多示例代码和说明，我这里算是稍微组合了一下。
设置navigation及tabBar
export default class RootTabs extends Component {
render() {
return(
<Tabs/>
)
}
}
const HomeStack = createStackNavigator(
{
Home: HomeScreen,
Detail: DetailsScreen,
},
{
initialRouteName: 'Home',
navigationOptions: {
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
}
);
HomeStack.navigationOptions = ({ navigation }) => {
return {
tabBarVisible: navigation.state.index === 0,
};
};
const SettingStack = createStackNavigator(
{
Setting: {
screen: SettingScreen,
navigationOptions: {
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
},
Detail: {
screen: DetailsScreen,
navigationOptions: {
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
},
Refresh: {
screen: RefreshListScreen,
navigationOptions: {
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
},
},
);
const Tabs = createBottomTabNavigator(
{
Home: {
screen: HomeStack,
navigationOptions: ({navigation}) => ({
tabBarLabel: 'Home',
tabBarIcon: ({focused, tintColor}) => (
<TabBarItemComponent
tintColor={tintColor}
focused={focused}
normalImage={require('../image/home_normal.png')}
selectedImage={require('../image/home_select.png')}
/>
)
}),
},
Setting: {
screen: SettingStack,
navigationOptions: ({navigation}) => ({
tabBarLabel: 'Setting',
tabBarIcon: ({focused, tintColor}) => (
<TabBarItemComponent
tintColor={tintColor}
focused={focused}
normalImage={require('../image/setting_normal.png')}
selectedImage={require('../image/setting_select.png')}
/>
)
}),
},
},
{
tabBarOptions: {
activeTintColor: 'blue',
inactiveTintColor: 'gray',
labelStyle: {
fontSize: 15,
},
},
}
);
然后在APP.js里使用即可
export default class App extends Component {
render() {
return(
<RootTabs/>
)
}
}
最后是效果图
list.png
detail.png
setting.png
总结
以上就是我对FlatList及react-navigation的一些使用示例，这里是Demo, 下载后cd到项目目录npm install即可。写的不好，请大家多多批评指正。
