這個項目應(yīng)該是一個標桿項目，看到之前很有幾個項目都是按照這個項目的頁面擺放順序來的
不過可以作為自己做項目的一種方式
源碼地址為：https://github.com/pgg-pgg/imooc_gp
項目的數(shù)據(jù)流是mobx
啟動頁不是定時器自動跳轉(zhuǎn)那種，而是滑動那種
我們分析代碼如下



上面是啟動頁的

//index.js /** @format */import {AppRegistry} from 'react-native'; import setup from "./js/pages/setup" import {name as appName} from './app.json';AppRegistry.registerComponent(appName, () => setup); //js/pages/setup.js /*** Sample React Native App* https://github.com/facebook/react-native** @format* @flow*/import React, {Component} from 'react'; import {Navigator} from 'react-native-deprecated-custom-components' import MobxTest from "../MobxTest"; import MyPageTest from "./My/MyPageTest"; import WelcomePage from "./WelcomePage";function setup() {//進行一些初始化的配置class Root extends Component {renderScene(route, navigator) {let Component = route.component;return <Component {...route.params} navigator={navigator}/>}render() {return <NavigatorinitialRoute={{component: WelcomePage}}renderScene={(route, navigator)=>this.renderScene(route, navigator)}/>}}return <Root/>; }module.exports = setup;

首先進入的是welcomePage頁面

//js/pages/WelcomePage.js import React, {Component} from 'react'; import {Platform,StyleSheet,Image,Text,View, AsyncStorage, } from 'react-native'; import NavigationBar from "../common/NavigationBar" import HomePage from "./HomePage" import GuidePage from "./GuidePage"; import ThemeDao from "../expand/dao/ThemeDao"; import SplashScreen from 'react-native-splash-screen' export default class WelcomePage extends Component{openApp(){//進行了判斷是不是第一次打開AsyncStorage.getItem('isFirst',(error,result)=>{if (result === 'false') {console.log('不是第一次打開');this.props.navigator.resetTo({//不是第一次打開就是進入home頁面component:HomePage,params:{theme:this.theme,...this.props}})} else {console.log('第一次打開');//是第一次打開就進入導(dǎo)航頁this.props.navigator.replace({component:GuidePage,params:{theme:this.theme,...this.props}})}});}componentDidMount(): void {new ThemeDao().getTheme().then(data=>{this.theme = data;})this.timer = setTimeout(()=>{SplashScreen.hide();this.openApp()},1000)}componentWillUnmount(): void {this.timer&&clearTimeout(this.timer);}constructor(props){super(props)}render(){return null;} }

第一次打開進入的導(dǎo)航頁面

//GuidePage import {StyleSheet, View, Button, Text, Image, TouchableOpacity,AsyncStorage} from 'react-native'; import React, {Component} from 'react'; import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager'; import HomePage from "./HomePage";export default class GuidePage extends Component {render() {let text1 = '消費者第一\n合作伙伴第二\nQunar第三';let text2 = '大聲說話\n無\'總\'稱謂\n遇到批評三不問';let text3 = '高層不諉過\n中層不放羊\n基層不跳步';return (<View style={{flex: 1}}><IndicatorViewPagerstyle={{flex: 1}}indicator={GuidePage._renderDotIndicator()}><View style={{backgroundColor: '#ff8800', justifyContent: 'center'}}><Image resizeMode={'contain'} style={styles.image}source={require('../../res/images/s_0_1.png')}/><Text style={styles.text_desc}>{text1}</Text></View><View style={{backgroundColor: '#669900', justifyContent: 'center'}}><Image resizeMode={'contain'} style={styles.image}source={require('../../res/images/s_1_1.png')}/><Text style={styles.text_desc}>{text2}</Text></View><View style={{backgroundColor: '#aa66cc', justifyContent: 'center'}}><Image resizeMode={'contain'} style={styles.image}source={require('../../res/images/s_2_1.png')}/><Text style={styles.text_desc}>{text3}</Text><TouchableOpacity onPress={()=>{// 存儲AsyncStorage.setItem('isFirst','false',(error)=>{if (error) {alert(error);}});this.props.navigator.resetTo({component:HomePage,params:{// theme:this.props.theme,...this.props}})}}><Text style={styles.text}>開始使用</Text></TouchableOpacity></View></IndicatorViewPager></View>);}static _renderDotIndicator() {return <PagerDotIndicator pageCount={3}/>;}}const styles = StyleSheet.create({text: {alignSelf: 'center',padding: 5,backgroundColor: '#2196f3',borderRadius: 5,fontSize: 18,color: 'white',},text_desc: {height:200,textAlign: 'center',textAlignVertical:'center',fontSize: 20,color: 'white',alignSelf: 'center',},image: {width: 200,height: 200,alignSelf: 'center'},btn: {width: 150,height: 40,backgroundColor: '#1296db',borderRadius: 8,justifyContent: 'center',alignItems: 'center',marginBottom: 50},btnText: {fontSize: 18,color: '#fff'},});

//js/pages/HomePage.js //里面的tab切換，根據(jù)選中的跳轉(zhuǎn)進去不同的頁面 /*** Sample React Native App* https://github.com/facebook/react-native** @format* @flow*/import React, {Component} from 'react'; import {Platform,StyleSheet,Image,Text,View,DeviceEventEmitter,} from 'react-native'; import TabNavigator from 'react-native-tab-navigator' import PopularPage from "./popular/PopularPage"; import Toast ,{DURATION}from "react-native-easy-toast"; import TrendingPage from "./trending/TrendingPage"; import FavoritePage from "./favorite/FavoritePage"; import MyPage from "./My/MyPage"; import BaseComponent from "./BaseComponent"; import codePush from "react-native-code-push";export const ACTION_HOME = {A_SHOW_TOAST:'showToast',A_RESTART:'restart',A_THEME:'THEME'}; export const FLAG_TAB={flag_popularTab:'tb_popular',flag_trendingTab:'tb_trending',flag_favoriteTab:'tb_favorite',flag_myTab:'tb_my', } export default class HomePage extends BaseComponent {constructor(props) {super(props);let selectedTab=this.props.selectedTab?this.props.selectedTab:'tb_popular';this.state = {selectedTab: selectedTab,theme:this.props.theme,}}componentDidMount(): void {super.componentDidMount();this.listener = DeviceEventEmitter.addListener('ACTION_HOME',(action,params)=>this.onAction(action,params));this.update();}/*** 想codepush檢查更新*/update(){codePush.sync({updateDialog:{appendReleaseDescription:true,descriptionPrefix:'更新內(nèi)容',title:'更新',mandatoryUpdateMessage:'',mandatoryContinueButtonLabel:'更新',},mandatoryInstallMode:codePush.InstallMode.ON_NEXT_RESTART,});}/*** 通知回調(diào)事件處理* @param action* @param params*/onAction(action,params){if(ACTION_HOME.A_RESTART===action){this.onRestart(params)}else if(ACTION_HOME.A_SHOW_TOAST===action){this.toast.show(params.text,DURATION.LENGTH_SHORT);}}/*** 重啟首頁* @param jumpToTab*/onRestart(jumpToTab){this.props.navigator.resetTo({component:HomePage,params:{...this.props,selectedTab:jumpToTab}})}componentWillUnmount(): void {super.componentWillUnmount();if (this.listener) {this.listener.remove();}}_renderType(Component,selectTab,title,renderIcon){return <TabNavigator.Itemselected={this.state.selectedTab === selectTab}selectedTitleStyle={this.state.theme.styles.selectedTitleStyle}title={title}renderIcon={() => <Image style={styles.image} source={renderIcon}/>}renderSelectedIcon={() => <Image style={[styles.image,this.state.theme.styles.tabBarSelectedIcon]} source={renderIcon}/>}// badgeText="1"onPress={() => this.setState({selectedTab: selectTab})}><View style={styles.page1}><Component {...this.props} theme={this.state.theme}/></View></TabNavigator.Item>}render() {return (// tab切換<View style={styles.container}><TabNavigator>{this._renderType(PopularPage,'tb_popular','最熱',require('../../res/images/ic_polular.png'))}{this._renderType(TrendingPage,'tb_trending','趨勢',require('../../res/images/ic_trending.png'))}{this._renderType(FavoritePage,'tb_favorite','收藏',require('../../res/images/ic_favorite.png'))}{this._renderType(MyPage,'tb_my','我的',require('../../res/images/ic_my.png'))}</TabNavigator><Toast ref={toast=>this.toast=toast}/></View>);} }const styles = StyleSheet.create({container: {flex: 1,backgroundColor: '#F5FCFF',},page1:{flex: 1,},page2:{flex: 2,backgroundColor: 'green'},image:{width:22,height:22} }); //其實挺有意思的

tab首先的頁面

應(yīng)該只是布局，然后從后端請求數(shù)據(jù)渲染即可
代碼如下：

//js/pages/popular/PopularPage.js import React, {Component} from 'react'; import {Image,StyleSheet, TouchableOpacity,View, } from 'react-native'; import NavigationBar from "../../common/NavigationBar"; import ScrollableTabView, {ScrollableTabBar} from 'react-native-scrollable-tab-view' import LanguageDao, {FLAG_LANGUAGE} from '../../expand/dao/LanguageDao' import PopularTab from "./PopularTab"; import ViewUtils from "../../util/ViewUtils"; import SearchPage from "../SearchPage"; import {MORE_MENU} from "../../common/MoreMenu"; import {FLAG_TAB} from "../HomePage"; import MoreMenu from "../../common/MoreMenu"; import BaseComponent from "../BaseComponent"; import CustomTheme from "../My/CustomTheme";export default class PopularPage extends BaseComponent {constructor(props) {super(props);this.languageDao = new LanguageDao(FLAG_LANGUAGE.flag_key);this.state = {languages: [],customThemeViewVisible: false,theme:this.props.theme,}}componentDidMount() {super.componentDidMount()//渲染數(shù)據(jù)this.loadData();}loadData() {//取出數(shù)據(jù)this.languageDao.fetch().then(result => {this.setState({languages: result})}).catch(error => {console.log(error)})} //點擊不同的語言界面，最后是進入不同的語言列表新聞中renderRightButton() {return <View style={{flexDirection:'row'}}><TouchableOpacityonPress={()=> {this.props.navigator.push({component:SearchPage,params:{...this.props}})}}><View style={{padding:5,marginRight:8}}><Imagestyle={{width:24,height:24}}source={require('../../../res/images/ic_search_white_48pt.png')}/></View></TouchableOpacity>{ViewUtils.getMoreButton(()=>this.refs.moreMenu.open())}</View>}renderMoreView(){let params={...this.props,fromPage:FLAG_TAB.flag_popularTab};return <MoreMenuref="moreMenu"{...params}menus={[MORE_MENU.Custom_Key,MORE_MENU.Sort_Key,MORE_MENU.Remove_Key,MORE_MENU.Share,MORE_MENU.Custom_Theme,MORE_MENU.About_Author,MORE_MENU.About]}anchorView={()=>this.refs.moreMenuButton}onMoreMenuSelect={(e)=> {if (e === MORE_MENU.Custom_Theme) {this.setState({customThemeViewVisible:true})}}}/>}renderCustomThemeView() {return (<CustomTheme visible={this.state.customThemeViewVisible}{...this.props}onClose={() => {this.setState({customThemeViewVisible: false,})}}/>)}render() {let statusBar = {backgroundColor:this.state.theme.themeColor,barStyle:'light-content',};//判斷語言切換的，這邊用到的是ScrollableTabView組件let content = this.state.languages.length > 0 ? <ScrollableTabViewtabBarBackgroundColor={this.state.theme.themeColor}tabBarActiveTextColor='#fff'tabBarInactiveTextColor='#333'tabBarUnderlineStyle={{backgroundColor: '#e7e7e7', height: 2}}renderTabBar={() => <ScrollableTabBar/>}>{this.state.languages.map((result, i, arr) => {let lan = arr[i];return lan.checked ?<PopularTab key={i} tabLabel={lan.name} {...this.props}/>: null;})}</ScrollableTabView> : null;//底部圖標切換return <View style={styles.container}><NavigationBartitle={'最熱'}leftButton={<View/>}rightButton={this.renderRightButton()}statusBar={statusBar}style={this.state.theme.styles.navBar}/>{content}{this.renderMoreView()}{this.renderCustomThemeView()}</View>} }const styles = StyleSheet.create({container: {flex: 1,backgroundColor: '#F5FCFF',},}); //js/pages/popular/PopularTab.js //下拉刷新和獲取數(shù)據(jù) import React, {Component} from 'react'; import {DeviceEventEmitter, ListView, RefreshControl, StyleSheet, View} from "react-native"; import ProjectModel from "../../model/ProjectModel"; import Utils from "../../util/Utils"; import DescPage from "./DescPage"; import {FLAG_STORAGE} from "../../expand/dao/DataRepository"; import RepositoryCell from "../../common/RepositoryCell"; import FavoriteDao from "../../expand/dao/FavoriteDao"; import DataRepository from "../../expand/dao/DataRepository"; import ActionUtils from "../../util/ActionUtils";const URL = "https://api.github.com/search/repositories?q="; const QUERY_STR = '&sort=stars'; const favoriteDao = new FavoriteDao(FLAG_STORAGE.flag_popular); const dataRepository = new DataRepository(FLAG_STORAGE.flag_popular);export default class PopularTab extends Component {constructor(props) {super(props);this.isFavoriteChange=false;this.state = {result: '',isLoading: false,dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),favoriteKeys :[],theme:this.props.theme,}}componentDidMount(): void {this.onLoad();this.listener= DeviceEventEmitter.addListener('favoriteChanged_popular',()=>{this.isFavoriteChange = true;})}componentWillUnmount(): void {if (this.listener){this.listener.remove();}}componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any): void {if (this.isFavoriteChange) {this.isFavoriteChange=false;this.getFavoriteKeys()}else if (nextProps.theme !== this.state.theme) {this.updateState({theme:nextProps.theme,})this.flushFavoriteState()}}/*** 更新project item收藏狀態(tài)*/flushFavoriteState(){let projectModels = [];let items = this.items;for(let i =0 ,len = items.length;i<len;i++){projectModels.push(new ProjectModel(items[i],Utils.checkFavorite(items[i],this.state.favoriteKeys)))}this.updateState({isLoading:false,dataSource:this.getDataSource(projectModels),})}getDataSource(data){return this.state.dataSource.cloneWithRows(data);}getFavoriteKeys(){favoriteDao.getFavoriteKeys().then(keys=>{if (keys) {this.updateState({favoriteKeys: keys})}this.flushFavoriteState();}).catch(e=>{this.flushFavoriteState()})}updateState(dic){if (!this) return;this.setState(dic);}onLoad() {this.updateState({isLoading: true});let url = URL + this.props.tabLabel + QUERY_STR;dataRepository.fetchRepository(url).then(result => {this.items = result && result.items ? result.items : result ? result : [];this.getFavoriteKeys();if (!this.items||result && result.update_date && !dataRepository.checkData(result.update_date)) {return dataRepository.fetchNetRepository(url)}}).then(items => {if (!items || items.length === 0) {return;} else {this.items=items;this.getFavoriteKeys()}}).catch(error => {console.log(error);this.updateState({isLoading:false,})});}choose(projectModel) {return <RepositoryCellonSelect={()=>ActionUtils.onSelectRepository({flag: FLAG_STORAGE.flag_popular,...this.props,projectModel: projectModel,})}theme={this.state.theme}key={projectModel.item.id}onFavorite={(item,isFavorite)=>ActionUtils.onFavorite(favoriteDao,item, isFavorite)}projectModel={projectModel}/>}render() {return <View style={styles.container}><ListViewdataSource={this.state.dataSource}renderRow={(data) => this.choose(data)}refreshControl={<RefreshControlrefreshing={this.state.isLoading}onRefresh={() => this.onLoad()}color={this.state.theme.themeColor}tintColor={this.state.theme.themeColor}title={'Loading...'}titleColor={this.state.theme.themeColor}/>}/></View>}}const styles = StyleSheet.create({container: {flex: 1,backgroundColor: '#F5FCFF',},page1: {flex: 1,backgroundColor: 'red'},page2: {flex: 2,backgroundColor: 'green'},image: {width: 22,height: 22},item: {backgroundColor: '#169',height: 100,margin: 15,alignItems: 'center',justifyContent: 'center',},text_my: {color: 'black',fontSize: 20,},text: {color: 'white',fontSize: 20,},indicatorContainer: {alignItems: 'center'},indicator: {color: 'red',margin: 10} }); //js/pages/popular/store/Store.js import {observable} from "mobx"; import DataRepository from "../../../expand/dao/DataRepository";export default class PopularStore {api;@observable popularItems=[];constructor(){this.api=new DataRepository();}getPopularItem(id){return this.popularItems.find(item=>item.id.toString()===id);}@action.bound()fetchPopularList(tabLabel){return this.api.getPopularInfo(tabLabel).then(action(result => {this.items = result && result.items ? result.items : result ? result : [];this.getFavoriteKeys();if (!this.items||result && result.update_date && !dataRepository.checkData(result.update_date)) {return dataRepository.fetchNetRepository(url)}}).then(items => {if (!items || items.length === 0) {return;} else {this.items=items;this.getFavoriteKeys()}}).catch(error => {console.log(error);this.updateState({isLoading:false,})}));}} //js/pages/popular/model/ProjectModel.js import {observable} from "mobx";export default class ProjectModel{@observable item;@observable isFavorite; } //js/pages/popular/DescPage.js import React, {Component} from 'react' import {View,StyleSheet,WebView,TouchableOpacity,Image,} from 'react-native' import NavigationBar from "../../common/NavigationBar"; import ViewUtils from "../../util/ViewUtils"; import FavoriteDao from "../../expand/dao/FavoriteDao"; import share from "../../../res/data/share"; import UShare from "../../common/UShare"; import BackPressComponent from "../../common/BackPressComponent";const TRENDING_URL = 'https://github.com/'; export default class DescPage extends Component {constructor(props) {super(props);// alert(this.props.title);this.backPress = new BackPressComponent({backPress:(e)=>this.onBackPress(e)});this.url = this.props.projectModel.item.html_url ? this.props.projectModel.item.html_url : TRENDING_URL + this.props.projectModel.item.fullName;let title = this.props.projectModel.item.full_name ? this.props.projectModel.item.full_name : this.props.projectModel.item.fullName;this.favoriteDao = new FavoriteDao(this.props.flag);this.state = {url: this.url,title: title,canGoBack: false,isFavorite: this.props.projectModel.isFavorite,favoriteIcon: this.props.projectModel.isFavorite ? require('../../../res/images/ic_star.png'): require('../../../res/images/ic_star_navbar.png'),theme: this.props.theme,}}componentDidMount(): void {this.backPress.componentDidMount();}componentWillUnmount(): void {this.backPress.componentWillUnmount();if (this.props.onUpdateFavorite)this.props.onUpdateFavorite();}onBack() {if (this.state.canGoBack) {this.webView.goBack()} else {this.props.navigator.pop();}}onBackPress(e){this.onBack();return true;}go() {this.setState({url: this.text})}onNavigationStateChange(e) {this.setState({canGoBack: e.canGoBack,url: e.url,})}onRightButtonClick() {let projectModel = this.props.projectModel;this.setFavoriteState(projectModel.isFavorite = !projectModel.isFavorite);const key = projectModel.item.fullName ? projectModel.item.fullName : projectModel.item.id.toString();if (projectModel.isFavorite) {this.favoriteDao.saveFavoriteItem(key, JSON.stringify(projectModel.item))} else {this.favoriteDao.removeFavoriteItem(key)}}setFavoriteState(isFavorite) {this.setState({isFavorite: isFavorite,favoriteIcon: isFavorite ? require('../../../res/images/ic_star.png'): require('../../../res/images/ic_star_navbar.png')})}renderRightButton() {return <View style={{flexDirection: 'row'}}>{ViewUtils.getShareButton(()=>this.shareInfo())}<TouchableOpacity onPress={() => this.onRightButtonClick()}><Image style={{width: 20, height: 20, marginRight: 10}} source={this.state.favoriteIcon}/></TouchableOpacity></View>}shareInfo(){const shareApp = share.share_app;UShare.share(shareApp.title, shareApp.content,shareApp.imgUrl,shareApp.url,()=>{},()=>{});}render() {let statusBar = {backgroundColor: this.state.theme.themeColor};let titleLayoutStyle = this.state.title.length>20?{paddingRight: 30}:null;return <View style={styles.container}><NavigationBartitle={this.state.title}statusBar={statusBar}titleLayoutStyle={titleLayoutStyle}style={this.state.theme.styles.navBar}rightButton={this.renderRightButton()}leftButton={ViewUtils.getLeftButton(() => this.onBack())}/><WebView ref={webView => this.webView = webView}source={{uri: this.state.url}}startInLoadingState={true}onNavigationStateChange={(e) =>this.onNavigationStateChange(e)}></WebView></View>}}const styles = StyleSheet.create({container: {flex: 1},tips: {fontSize: 20},row: {flexDirection: 'row',alignItems: 'center',margin: 10},input: {height: 40,flex: 1,borderWidth: 1,margin: 2,} });

趨勢頁面跟最熱頁面類似

//js/pages/trending/TrendingPage.js import React, {Component} from 'react'; import {Platform,StyleSheet,Image,Text,View,TextInput,ListView,RefreshControl,DeviceEventEmitter,TouchableOpacity, } from 'react-native'; import NavigationBar from "../../common/NavigationBar" import DataRepository, {FLAG_STORAGE} from "../../expand/dao/DataRepository" import ScrollableTabView, {ScrollableTabBar} from 'react-native-scrollable-tab-view' import RepositoryCell from "../../common/RepositoryCell"; import LanguageDao, {FLAG_LANGUAGE} from '../../expand/dao/LanguageDao' import DescPage from "../popular/DescPage"; import TrendingCell from "../../common/TrendingCell"; import TimeSpan from "../../model/TimeSpan"; import Popover from "../../common/Popover"; import FavoriteDao from "../../expand/dao/FavoriteDao"; import ProjectModel from "../../model/ProjectModel"; import Utils from "../../util/Utils"; import ActionUtils from "../../util/ActionUtils"; import {FLAG_TAB} from "../HomePage"; import MoreMenu, {MORE_MENU} from "../../common/MoreMenu"; import ViewUtils from "../../util/ViewUtils"; import BaseComponent from "../BaseComponent"; import CustomTheme from "../My/CustomTheme";const API_URL = "https://github.com/trending/"; var timeSpanTextArray = [new TimeSpan('今 天', 'since=daily'), new TimeSpan('本 周', 'since=weekly'), new TimeSpan('本 月', 'since=monthly')]; var favoriteDao = new FavoriteDao(FLAG_STORAGE.flag_trending); var dataRespository = new DataRepository(FLAG_STORAGE.flag_trending);export default class TrendingPage extends BaseComponent {constructor(props) {super(props);this.languageDao = new LanguageDao(FLAG_LANGUAGE.flag_language);this.state = {languages: [],isVisible: false,buttonRect: {},timeSpan: timeSpanTextArray[0],theme:this.props.theme,customThemeViewVisible: false,}}componentDidMount() {super.componentDidMount();this.loadData();}componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any): void {if (nextProps.timeSpan !== this.props.timeSpan) {this.loadData(nextProps.timeSpan)}}loadData() {this.languageDao.fetch().then(result => {this.setState({languages: result})}).catch(error => {console.log(error)})}showPopover() {this.refs.button.measure((ox, oy, width, height, px, py) => {this.setState({isVisible: true,buttonRect: {x: px, y: py, width: width, height: height}});});}closePopover() {this.setState({isVisible: false,});}renderTitleView() {return <View><TouchableOpacity ref={'button'} onPress={() => {this.showPopover()}}><View style={{flexDirection: 'row', alignItems: 'center'}}><Text style={{fontSize: 18,color: 'white',fontWeight: '400'}}>趨勢 {this.state.timeSpan.showText}</Text><Image style={{width: 12, height: 12, marginLeft: 5}}source={require('../../../res/images/ic_spinner_triangle.png')}/></View></TouchableOpacity></View>}onSelectTimeSpan(timeSpan) {this.setState({timeSpan: timeSpan,isVisible: false,})}renderMoreView() {let params = {...this.props, fromPage: FLAG_TAB.flag_popularTab};return <MoreMenuref="moreMenu"{...params}menus={[MORE_MENU.Custom_Language, MORE_MENU.Sort_Language,MORE_MENU.Share, MORE_MENU.Custom_Theme,MORE_MENU.About_Author, MORE_MENU.About]}anchorView={() => this.refs.moreMenuButton}onMoreMenuSelect={(e) => {if (e === MORE_MENU.Custom_Theme) {this.setState({customThemeViewVisible: true})}}}/>}renderCustomThemeView() {return (<CustomTheme visible={this.state.customThemeViewVisible}{...this.props}onClose={() => {this.setState({customThemeViewVisible: false,})}}/>)}render() {let statusBar = {backgroundColor:this.state.theme.themeColor};let content = this.state.languages.length > 0 ? <ScrollableTabViewtabBarBackgroundColor={this.state.theme.themeColor}tabBarActiveTextColor='#fff'tabBarInactiveTextColor='#333'tabBarUnderlineStyle={{backgroundColor: '#e7e7e7', height: 2}}renderTabBar={() => <ScrollableTabBar/>}>{this.state.languages.map((result, i, arr) => {let lan = arr[i];return lan.checked ?<TrendingTab key={i} tabLabel={lan.name}timeSpan={this.state.timeSpan} {...this.props}>{lan.name}</TrendingTab> : null;})}</ScrollableTabView> : null;let timeSpanView = <PopoverisVisible={this.state.isVisible}fromRect={this.state.buttonRect}placement={'bottom'}contentStyle={{backgroundColor: '#343434', opacity: 0.5}}onClose={() => this.closePopover()}>{timeSpanTextArray.map((result, i, arr) => {return <TouchableOpacity key={i} underlayColor={'transparent'}onPress={() => this.onSelectTimeSpan(arr[i])}><Text style={{fontSize: 18, color: 'white', padding: 8, fontWeight: '400'}}>{arr[i].showText}</Text></TouchableOpacity>})}</Popover>;return <View style={styles.container}><NavigationBartitleView={this.renderTitleView()}leftButton={<View/>}rightButton={ViewUtils.getMoreButton(() => this.refs.moreMenu.open())}statusBar={statusBar}style={this.state.theme.styles.navBar}/>{content}{timeSpanView}{this.renderMoreView()}{this.renderCustomThemeView()}</View>} }class TrendingTab extends Component {constructor(props) {super(props);this.isFavoriteChange = false;this.state = {result: '',isLoading: false,dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),favoriteKeys: [],theme:this.props.theme,}}/*** 更新project item收藏狀態(tài)*/flushFavoriteState() {let projectModels = [];let items = this.items;for (let i = 0, len = items.length; i < len; i++) {projectModels.push(new ProjectModel(items[i], Utils.checkFavorite(items[i], this.state.favoriteKeys)))}this.updateState({isLoading: false,dataSource: this.getDataSource(projectModels),})}getDataSource(data) {return this.state.dataSource.cloneWithRows(data);}getFavoriteKeys() {favoriteDao.getFavoriteKeys().then(keys => {if (keys) {this.updateState({favoriteKeys: keys})}this.flushFavoriteState();}).catch(e => {this.flushFavoriteState()})}updateState(dic) {if (!this) return;this.setState(dic);}componentDidMount(): void {this.onLoad(this.props.timeSpan, true)this.listener = DeviceEventEmitter.addListener('favoriteChanged_trending', () => {this.isFavoriteChange = true;})}onUpdateFavorite() {this.getFavoriteKeys();}componentWillUnmount(): void {if (this.listener) {this.listener.remove();}}componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any): void {if (this.isFavoriteChange) {this.isFavoriteChange = false;this.getFavoriteKeys()}else if (nextProps.theme !== this.state.theme) {this.updateState({theme:nextProps.theme,});this.flushFavoriteState()}}getFetchUrl(timeSpan, category) {return API_URL + category + '?' + timeSpan.searchText}onLoad(timeSpan, isRefresh) {this.updateState({isLoading: true});let url = this.getFetchUrl(timeSpan, this.props.tabLabel)dataRespository.fetchRepository(url).then(result => {this.items = result && result.items ? result.items : result ? result : [];this.getFavoriteKeys();if (!this.items || isRefresh && result && result.update_date && !dataRespository.checkData(result.update_date)) {return dataRespository.fetchNetRepository(url)}}).then(items => {if (!items || items.length === 0) {return;} else {this.items = items;this.getFavoriteKeys();}}).catch(error => {this.updateState({isLoading: false})});}choose(projectModel) {return <TrendingCellonSelect={() => ActionUtils.onSelectRepository({projectModel: projectModel,flag: FLAG_STORAGE.flag_trending,...this.props,parentComponent: this,onUpdateFavorite: ()=>this.onUpdateFavorite(),})}theme={this.props.theme}key={projectModel.item.fullName}onFavorite={(item, isFavorite) => ActionUtils.onFavorite(favoriteDao, item, isFavorite, FLAG_STORAGE.flag_trending)}projectModel={projectModel}/>}onRefresh() {this.onLoad(this.props.timeSpan, true);}render() {return <View style={styles.container}><ListViewdataSource={this.state.dataSource}renderRow={(data) => this.choose(data)}refreshControl={<RefreshControlrefreshing={this.state.isLoading}onRefresh={() => this.onRefresh()}color={this.state.theme.themeColor}tintColor={this.state.theme.themeColor}title={'Loading...'}titleColor={this.state.theme.themeColor}/>}/></View>}}const styles = StyleSheet.create({container: {flex: 1,backgroundColor: '#F5FCFF',},page1: {flex: 1,backgroundColor: 'red'},page2: {flex: 2,backgroundColor: 'green'},image: {width: 22,height: 22},item: {backgroundColor: '#169',height: 100,margin: 15,alignItems: 'center',justifyContent: 'center',},text_my: {color: 'black',fontSize: 20,},text: {color: 'white',fontSize: 20,},indicatorContainer: {alignItems: 'center'},indicator: {color: 'red',margin: 10} });

//收藏頁面 //js/pages/favorite/FavoritePage.js import React, {Component} from 'react'; import {StyleSheet,View,ListView,RefreshControl,DeviceEventEmitter, } from 'react-native'; import NavigationBar from "../../common/NavigationBar" import {FLAG_STORAGE} from "../../expand/dao/DataRepository" import ScrollableTabView, {ScrollableTabBar} from 'react-native-scrollable-tab-view' import RepositoryCell from "../../common/RepositoryCell"; import DescPage from "../popular/DescPage"; import ProjectModel from "../../model/ProjectModel"; import FavoriteDao from "../../expand/dao/FavoriteDao"; import TrendingCell from "../../common/TrendingCell"; import ArrayUtils from "../../util/ArrayUtils"; import ActionUtils from "../../util/ActionUtils"; import MoreMenu, {MORE_MENU} from "../../common/MoreMenu"; import {FLAG_TAB} from "../HomePage"; import ViewUtils from "../../util/ViewUtils"; import BaseComponent from "../BaseComponent"; import CustomTheme from "../My/CustomTheme";export default class FavoritePage extends BaseComponent {constructor(props) {super(props);this.state = {theme: this.props.theme,customThemeViewVisible: false,}}renderMoreView() {let params = {...this.props, fromPage: FLAG_TAB.flag_popularTab}return <MoreMenuref="moreMenu"{...params}menus={[MORE_MENU.Custom_Theme, MORE_MENU.Share,MORE_MENU.About_Author, MORE_MENU.About]}anchorView={() => this.refs.moreMenuButton}onMoreMenuSelect={(e) => {if (e === MORE_MENU.Custom_Theme) {this.setState({customThemeViewVisible: true})}}}/>}renderCustomThemeView() {return (<CustomTheme visible={this.state.customThemeViewVisible}{...this.props}onClose={() => {this.setState({customThemeViewVisible: false,})}}/>)}render() {let statusBar = {backgroundColor: this.state.theme.themeColor};let content = <ScrollableTabViewtabBarBackgroundColor={this.state.theme.themeColor}tabBarActiveTextColor='#fff'tabBarInactiveTextColor='#333'tabBarUnderlineStyle={{backgroundColor: '#e7e7e7', height: 2}}renderTabBar={() => <ScrollableTabBar/>}><FavoriteTab tabLabel='最熱' flag={FLAG_STORAGE.flag_popular} {...this.props}/><FavoriteTab tabLabel='趨勢' flag={FLAG_STORAGE.flag_trending} {...this.props}/></ScrollableTabView>return <View style={styles.container}><NavigationBartitle={'收藏'}leftButton={<View/>}rightButton={ViewUtils.getMoreButton(() => this.refs.moreMenu.open())}statusBar={statusBar}style={this.state.theme.styles.navBar}/>{content}{this.renderMoreView()}{this.renderCustomThemeView()}</View>} }class FavoriteTab extends Component {constructor(props) {super(props);this.unFavoriteItems = [];this.favoriteDao = new FavoriteDao(this.props.flag);this.state = {result: '',isLoading: false,dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),favoriteKeys: [],theme: this.props.theme,}}componentDidMount(): void {this.onLoad(true)}componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any): void {this.onLoad(false)}updateState(dic) {if (!this) return;this.setState(dic);}getDataSource(data) {return this.state.dataSource.cloneWithRows(data);}onLoad(isShowLoading) {if (isShowLoading) {this.updateState({isLoading: true});}this.favoriteDao.getAllItems().then(items => {let resultData = [];for (let i = 0, len = items.length; i < len; i++) {resultData.push(new ProjectModel(items[i], true));}this.updateState({isLoading: false,dataSource: this.getDataSource(resultData)})}).catch(e => {this.updateState({isLoading: false})})}choose(projectModel) {let CellComponent = this.props.flag === FLAG_STORAGE.flag_popular ? RepositoryCell : TrendingCell;return <CellComponentonSelect={() => ActionUtils.onSelectRepository({flag: FLAG_STORAGE.flag_popular,...this.props,projectModel: projectModel,})}theme={this.props.theme}key={this.props.flag === FLAG_STORAGE.flag_popular ? projectModel.item.id : projectModel.item.fullName}onFavorite={(item, isFavorite) => ActionUtils.onFavorite(this.favoriteDao, item, isFavorite, this.props.flag)}projectModel={projectModel}/>}render() {return <View style={styles.container}><ListViewdataSource={this.state.dataSource}renderRow={(data) => this.choose(data)}enableEmptySections={true}refreshControl={<RefreshControlrefreshing={this.state.isLoading}onRefresh={() => this.onLoad()}color={this.state.theme.themeColor}tintColor={this.state.theme.themeColor}title={'Loading...'}titleColor={this.state.theme.themeColor}/>}/></View>}}const styles = StyleSheet.create({container: {flex: 1,backgroundColor: '#F5FCFF',},page1: {flex: 1,backgroundColor: 'red'},page2: {flex: 2,backgroundColor: 'green'},image: {width: 22,height: 22},item: {backgroundColor: '#169',height: 100,margin: 15,alignItems: 'center',justifyContent: 'center',},text_my: {color: 'black',fontSize: 20,},text: {color: 'white',fontSize: 20,},indicatorContainer: {alignItems: 'center'},indicator: {color: 'red',margin: 10} });

//js/pages/My/MyPage.js import React, {Component} from 'react'; import {StyleSheet,Text,View,ScrollView,TouchableHighlight,Image, } from 'react-native'; import NavigationBar from "../../common/NavigationBar"; import GlobalStyles from "../../../res/styles/GlobalStyles" import ViewUtils from "../../util/ViewUtils"; import CustomKeyPage from "./CustomKeyPage"; import {FLAG_LANGUAGE} from "../../expand/dao/LanguageDao"; import SortKeyPage from "./SortKeyPage"; import AboutMePage from "./about/AboutMePage"; import AboutPage from "./about/AboutPage"; import {MORE_MENU} from "../../common/MoreMenu"; import CustomTheme from "./CustomTheme"; import BaseComponent from "../BaseComponent"; import codePush from "react-native-code-push";export default class MyPage extends BaseComponent {constructor(props) {super(props);this.state = {customThemeViewVisible: false,theme:this.props.theme,}}onClick(tab) {let TargetComponent, params = {...this.props, menuType: tab};switch (tab) {case MORE_MENU.Custom_Language:TargetComponent = CustomKeyPage;params.flag = FLAG_LANGUAGE.flag_language;break;case MORE_MENU.Custom_Key:TargetComponent = CustomKeyPage;params.flag = FLAG_LANGUAGE.flag_key;break;case MORE_MENU.Remove_Key:TargetComponent = CustomKeyPage;params.flag = FLAG_LANGUAGE.flag_key;params.isRemoveKey = true;break;case MORE_MENU.Sort_Language:TargetComponent = SortKeyPage;params.flag = FLAG_LANGUAGE.flag_language;break;case MORE_MENU.Sort_Key:TargetComponent = SortKeyPage;params.flag = FLAG_LANGUAGE.flag_key;break;case MORE_MENU.Custom_Theme:this.setState({customThemeViewVisible: true});break;case MORE_MENU.About_Author:TargetComponent = AboutMePage;break;case MORE_MENU.About:TargetComponent = AboutPage;break;case '更新':// this.update();break;}if (TargetComponent) {this.props.navigator.push({component: TargetComponent,params: params,});}}getItem(tag, icon, text) {return ViewUtils.getSettingItem(() => this.onClick(tag), icon, text, this.state.theme.styles.tabBarSelectedIcon, null);}renderCustomThemeView() {return (<CustomTheme visible={this.state.customThemeViewVisible}{...this.props}onClose={() => {this.setState({customThemeViewVisible: false,})}}/>)}render() {let statusBar = {backgroundColor:this.state.theme.themeColor};let navigatorBar = <NavigationBar title={'我的'}statusBar={statusBar}style={this.state.theme.styles.navBar}/>;return <View style={GlobalStyles.root_container}>{navigatorBar}<ScrollView>{/*最熱管理*/}<TouchableHighlight onPress={() => this.onClick(MORE_MENU.About)}><View style={[styles.item, {height: 90}]}><View style={{flexDirection: 'row', alignItems: 'center'}}><Image source={require('../../../res/images/ic_trending.png')}style={[{width: 40, height: 40, marginRight: 10}, this.state.theme.styles.tabBarSelectedIcon]}/><Text>Github Popular</Text></View><Image style={[{marginRight: 10, height: 22, width: 22,}, this.state.theme.styles.tabBarSelectedIcon]}source={require('../../../res/images/ic_tiaozhuan.png')}/></View></TouchableHighlight><View style={GlobalStyles.line}/>{/*趨勢管理*/}<Text style={styles.groupTitle}>趨勢管理</Text><View style={GlobalStyles.line}/>{/*自定義語言*/}{this.getItem(MORE_MENU.Custom_Language, require('./img/ic_custom_language.png'), '自定義語言')}<View style={GlobalStyles.line}/>{/*語言排序*/}{this.getItem(MORE_MENU.Sort_Language, require('./img/ic_sort.png'), '語言排序')}<View style={GlobalStyles.line}/>{/*標簽管理*/}<Text style={styles.groupTitle}>標簽管理</Text><View style={GlobalStyles.line}/>{/*自定義標簽*/}{this.getItem(MORE_MENU.Custom_Key, require('./img/ic_custom_language.png'), '自定義標簽')}<View style={GlobalStyles.line}/>{/*標簽排序*/}{this.getItem(MORE_MENU.Sort_Key, require('./img/ic_swap_vert.png'), '標簽排序')}<View style={GlobalStyles.line}/>{/*標簽移除*/}{this.getItem(MORE_MENU.Remove_Key, require('./img/ic_remove.png'), '標簽移除')}<View style={GlobalStyles.line}/>{/*設(shè)置*/}<Text style={styles.groupTitle}>設(shè)置</Text><View style={GlobalStyles.line}/>{this.getItem(MORE_MENU.Custom_Theme, require('./img/ic_custom_theme.png'), '自定義主題')}<View style={GlobalStyles.line}/>{this.getItem(MORE_MENU.About_Author, require('./img/ic_insert_emoticon.png'), '關(guān)于作者')}<View style={GlobalStyles.line}/></ScrollView>{this.renderCustomThemeView()}</View>} }const styles = StyleSheet.create({container: {flex: 1,backgroundColor: '#F5FCFF',},item: {flexDirection: 'row',justifyContent: 'space-between',alignItems: 'center',padding: 10,height: 60,backgroundColor: 'white',},groupTitle: {marginLeft: 10,marginTop: 10,marginBottom: 5,fontSize: 12,color: 'gray',} }); //js/pages/My/CustomTheme.js import React, {Component} from 'react'; import {StyleSheet,Text,View,ScrollView,TouchableHighlight,Image,Platform,DeviceEventEmitter,Modal, } from 'react-native';import GlobalStyles from "../../../res/styles/GlobalStyles" import ThemeFactory,{ThemeFlags} from "../../../res/styles/ThemeFactory" import ThemeDao from "../../expand/dao/ThemeDao"; import {ACTION_HOME} from "../HomePage";export default class CustomTheme extends Component {constructor(props) {super(props);this.themeDao = new ThemeDao();}onSelectTheme(themeKey){this.props.onClose();this.themeDao.save(ThemeFlags[themeKey]);DeviceEventEmitter.emit('ACTION_BASE',ACTION_HOME.A_THEME,ThemeFactory.createTheme(ThemeFlags[themeKey]))}getThemeItem(themeKey){return <TouchableHighlight underlayColor={'white'} onPress={()=>this.onSelectTheme(themeKey)} style={{flex: 1}}><View style={[{backgroundColor: ThemeFlags[themeKey]},styles.themeItem]}><Text style={styles.themeText}>{themeKey}</Text></View></TouchableHighlight>}/*** 創(chuàng)建主題列表* @returns {Array}*/renderThemeItems(){const views = [];for (let i=0,keys=Object.keys(ThemeFlags),l=keys.length;i<l;i+=3){const key1 = keys[i], key2 = keys[i + 1], key3 = keys[i + 2];views.push(<View keys={i} style={{flexDirection: 'row'}}>{this.getThemeItem(key1)}{this.getThemeItem(key2)}{this.getThemeItem(key3)}</View>)}return views;}renderContentView(){return <Modal animationType={"slide"}transparent={true}visible={this.props.visible}onRequestClose={() => {this.props.onClose()}}><View style={styles.modalContainer}><ScrollView>{this.renderThemeItems()}</ScrollView></View></Modal>}render() {let view = this.props.visible?<View style={GlobalStyles.root_container}>{this.renderContentView()}</View>:null;return view;} }const styles = StyleSheet.create({container: {flex: 1,backgroundColor: '#F5FCFF',},modalContainer:{flex:1,margin: 10,marginTop: Platform.OS==='ios'?20:10,backgroundColor:'white',borderRadius: 3,shadowColor: 'gray',shadowOffset: {width: 2,height: 2},shadowOpacity: 0.5,shadowRadius: 2,padding: 3},themeItem:{flex:1,height: 120,margin: 3,padding:3,borderRadius:2,alignItems: 'center',justifyContent: 'center',flexDirection: 'row',},themeText:{color:'white',fontWeight: '500',fontSize:16,}});

by最后，如果你看代碼看的想睡覺，那么它是提醒你，換一個項目看看～
沒有看代碼看睡著的人，只有不夠有吸引力的代碼

轉(zhuǎn)載于:https://www.cnblogs.com/smart-girl/p/10900386.html

總結(jié)

以上是生活随笔為你收集整理的【水滴石穿】imooc_gp的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。