![](https://box.kancloud.cn/e65d5eb453df4521164c8523da8f45b7_413x637.png) 完整代码 ~~~ import React from 'react'; import { ToastAndroid,FlatList, StyleSheet,View, Text,Button,Image,StatusBar,WebView,TouchableOpacity,Modal} from 'react-native'; import { TabNavigator,StackNavigator} from 'react-navigation'; //动态组件 class DynamicScreen extends React.Component { static navigationOptions = { title: '动态', tabBarIcon: ({ focused, tintColor }) => ( <Image source={require('./icon/ic_home_black_24dp.png')} style={{ width: 28, height: 28, tintColor: tintColor }} /> ), }; constructor(props) { super(props); this.state = { page: 1, refreshing: false, data: {}, totalPage:10 }; this.requestData(); }; handleRefresh = () => { this.setState({ page: 1, refreshing: true, data: [], }, () => { this.requestData(); }); } handleRefresh2 = () => { this.setState({ page: (this.state.page+1), refreshing: true }, () => { this.requestData(); }); } requestData = () => { if(this.state.page > this.state.totalPage){ ToastAndroid.show('没有数据啦 !', ToastAndroid.SHORT); this.setState({refreshing: false}); return false; } const url = "http://192.168.10.119/app3/data.php?page="+this.state.page; fetch(url).then(res => { return res.json(); }).then(res => { this.setState({ data: [...this.state.data, ...res], refreshing: false, totalPage:2 }); }).catch(err => { this.setState({refreshing: false}); }); } render() { return ( <View style={styles.container}> <FlatList keyExtractor={item => item.id} data={this.state.data} refreshing={this.state.refreshing} onRefresh={this.handleRefresh} onEndReached={this.handleRefresh2} onEndReachedThreshold={0.5} renderItem={({item}) => ( <TouchableOpacity onPress={() => this.props.navigation.navigate('dynamicDetail',{id:item.id,title:item.title})}> <View style={styles.item}> <View style={{flex:1}}> <Text style={styles.title}>{item.title}</Text> <Text style={styles.info}>{item.info}</Text> <Text style={styles.time}>{item.time}</Text> </View> </View> </TouchableOpacity> )} ItemSeparatorComponent={ ()=>( <View style={{backgroundColor:'#EBEBEB',height:5}}> </View> ) } ListEmptyComponent={ ()=>( <View style={{height:50,flex:1,alignItems:'center',justifyContent:'center',backgroundColor:'#fff'}}> <Text style={{color:'red'}}>暂无数据</Text> </View> ) } /> </View> ); } } //动态组件详情组件 class DynamicDetailScreen extends React.Component { static navigationOptions = ({ navigation }) => ({ title: navigation.state.params.title, headerStyle:styles.headerBar, headerTintColor:'#fff' }); render(){ return ( <View style={styles.container}> <WebView source={{html:"<p>2222222222</p>"}} /> </View> ); } } //发现组件 class FindScreen extends React.Component { static navigationOptions = { title: '发现', tabBarIcon: ({ focused, tintColor }) => ( <Image source={require('./icon/ic_group_work_black_24dp.png')} style={{ width: 28, height: 28, tintColor: tintColor }} /> ), }; render() { return ( <View style={[styles.container,styles.findBody]}> <View style={styles.findView}> <Image source={require('./icon/ic_group_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}> 朋友圈 </Text> </View> <View style={styles.findView}> <Image source={require('./icon/ic_filter_center_focus_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>扫一扫</Text> </View> <View style={styles.findView}> <Image source={require('./icon/ic_search_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>搜一搜</Text> </View> <View style={styles.findView}> <Image source={require('./icon/ic_shopping_cart_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>购物</Text> </View> <View style={[styles.findView,styles.findMT]}> <Image source={require('./icon/ic_games_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>游戏</Text> </View> <View style={styles.findView}> <Image source={require('./icon/ic_code_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>小程序</Text> </View> </View> ); } } //我的组件 class MyScreen extends React.Component { static navigationOptions = { title: '我的', tabBarIcon: ({ focused, tintColor }) => ( <Image source={require('./icon/ic_account_circle_black_24dp.png')} style={{ width: 28, height: 28, tintColor: tintColor }} /> ), }; render() { return ( <View style={[styles.container,styles.findBody]}> <View style={styles.findView}> <Image source={require('./icon/ic_person_outline_black_24dp.png')} style={styles.findViewIcon2} /> <View style={[styles.findViewText2,{flex:8,justifyContent:'center'}]}> <Text style={{color:'#232323',fontSize:18}}>全球变暖</Text> <Text style={{color:'gray',marginTop:8}}>微信号:weibo</Text> </View> </View> <View style={styles.findView}> <Image source={require('./icon/ic_monetization_on_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>钱包</Text> </View> <View style={styles.findView}> <Image source={require('./icon/ic_chrome_reader_mode_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>收藏</Text> </View> <View style={[styles.findView,styles.findMT]}> <Image source={require('./icon/ic_photo_library_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>相册</Text> </View> <View style={[styles.findView,styles.findMT]}> <Image source={require('./icon/ic_card_giftcard_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>卡包</Text> </View> <View style={[styles.findView,styles.findMT]}> <Image source={require('./icon/ic_tag_faces_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>表情</Text> </View> <View style={styles.findView}> <Image source={require('./icon/ic_settings_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>设置</Text> </View> </View> ); } } //定义tab组件 const TabScreen = TabNavigator({ dynamic: { screen: DynamicScreen }, find: { screen: FindScreen }, my:{ screen:MyScreen } },{ tabBarPosition: 'bottom',//选项卡位置 animationEnabled: true, tabBarOptions: { activeTintColor: '#72A7F7',//选中颜色 inactiveTintColor:'#919191',//未选中颜色 //设置选项卡的背景颜色 style: { backgroundColor: '#FFFFFF', borderTopWidth:1, borderTopColor:'#E3E3E3' }, //去掉安卓点击之后的小黄线 indicatorStyle: { height: 0 }, //是否显示icon图标 showIcon:true, showLabel:false, } }); //组件样式 const styles = StyleSheet.create({ container: { flex: 1, backgroundColor:'#EBEBEB' }, item: { flex:1, flexDirection:'row', padding:10, backgroundColor:'#fff', }, title:{ color:'#4D4F53', fontSize:18 }, info:{ color:'#4d4f53', fontSize:14, marginTop:5, fontWeight:'400' }, time:{ color:'gray', fontSize:12, marginTop:8 }, //动态组件图片 userphoto:{ width:40, height:40, tintColor:'#9E9E9E' }, //头部组件+ headAdd:{ width: 24, height: 24, tintColor: '#FFFFFF', marginRight:20, }, //发现组件样式 findView:{ backgroundColor:'#fff', marginTop:15, padding:10, alignItems:'center', flexDirection:'row', }, findViewText2:{ flex:8, }, findViewIcon:{ width:24, height:24, marginRight:10 }, findViewIcon2:{ flex:2, width:46, height:46, }, findViewText:{ fontSize:16, color:'#232323', fontWeight:'400' }, findBody:{ backgroundColor:'#EBEBEB' }, findMT:{ marginTop:0, borderTopWidth:1, borderTopColor:'#EBEBEB' }, headerBar:{ backgroundColor:'#264D7F', } }); class HeadScreen extends React.Component{ constructor(props) { super(props); } render(){ return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <TouchableOpacity onPress={() => { alert('55555555'); }}> <Image source={require('./icon/ic_search_black_24dp.png')} style={styles.headAdd} /> </TouchableOpacity> </View> ); } } // myapp路由 const MyApp = StackNavigator({ dynamicStack: { screen: TabScreen, navigationOptions: ({navigation}) => ({ headerStyle:styles.headerBar, headerTitleStyle:{ color:'#FFFFFF', fontSize:16 }, headerTintColor:'#FFFFFF', headerRight:(<HeadScreen></HeadScreen>), }), }, dynamicDetail: { screen: DynamicDetailScreen, }, }); export default class App extends React.Component { render() { return <MyApp />; } } ~~~