【水滴石穿】RNNewsGo

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量77 收藏
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/smart-girl/p/10881634.html
版权

项目地址为：https://github.com/ImVeryGood/RNNewsGo
我们先来看一下页面
分析了一下项目，项目也是有用到redux-saga的
然后模块比较清晰
接下来我们分析代码

//index.js
/**
 * @format
 */

import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";

AppRegistry.registerComponent(appName, () => App);

根index.js引用的是根App.js
固定的可切换底部
1037363-20190517145136934-2086160409.png

//src/screens/base/Navigations.js
import {
  createAppContainer,
  createBottomTabNavigator,
  createStackNavigator
} from "react-navigation";
import { Image, StyleSheet } from "react-native";
import News from "../news/News";
import React from "react";
import Mine from "../mine/Mine";
import Picture from "../picture/Picture";
import Video from "../video/Video";
import TopNavigation from "../picture/components/TopNavigation";
const tabBottom = createBottomTabNavigator(
  {
    News: {
      screen: News,
      navigationOptions: {
        header: null,
        tabBarLabel: "新闻",
        tabBarIcon: ({ focused }) => {
          return (
            <Image
              style={styles.tabBarIcon}
              source={
                focused
                  ? require("./image/b_newhome_tabbar_press.png")
                  : require("./image/b_newhome_tabbar.png")
              }
            />
          );
        }
      }
    },
    Picture: {
      screen: Picture,
      navigationOptions: {
        header: null,
        tabBarLabel: "图片",
        tabBarIcon: ({ focused }) => {
          return (
            <Image
              style={styles.tabBarIcon}
              source={
                focused
                  ? require("./image/b_newcare_tabbar_press.png")
                  : require("./image/b_newcare_tabbar.png")
              }
            />
          );
        }
      }
    },
    Video: {
      screen: Video,
      navigationOptions: {
        header: null,
        tabBarLabel: "视频",
        tabBarIcon: ({ focused }) => {
          return (
            <Image
              style={styles.tabBarIcon}
              source={
                focused
                  ? require("./image/b_newdiscover_tabbar_press.png")
                  : require("./image/b_newdiscover_tabbar.png")
              }
            />
          );
        }
      }
    },
    Mine: {
      screen: Mine,
      navigationOptions: {
        header: null,
        tabBarLabel: "我的",
        tabBarIcon: ({ focused }) => {
          return (
            <Image
              style={styles.tabBarIcon}
              source={
                focused
                  ? require("./image/b_newmine_tabbar_press.png")
                  : require("./image/b_newmine_tabbar.png")
              }
            />
          );
        }
      }
    }
  },
  {
    initialRouteName: "News",
    swipeEnabled: true,
    indicatorStyle: { height: 0 },
    tabBarOptions: {
      //当前选中的tab bar的文本颜色和图标颜色
      activeTintColor: "red",
      //当前未选中的tab bar的文本颜色和图标颜色
      inactiveTintColor: "#000"
    }
  }
);
const App = createStackNavigator({
  Main: {
    screen: tabBottom,
    navigationOptions: {
      header: null,
      indicatorStyle: { height: 0 }
    }
  }
});

export default createAppContainer(App);
const styles = StyleSheet.create({
  tabBarIcon: {
    width: 30,
    height: 30
  }
});
//App.js
import React, { Component } from "react";
//固定的底部切换
import Navigations from "./src/screens/base/Navigations";
import { Provider } from "react-redux";
//有用到数据持久化
import { store, persistor } from "./src/store/configStore";
import { PersistGate } from "redux-persist/integration/react";
import { Router } from "react-native-router-flux";
import scenes from "./src/scenes";
type Props = {};
export default class App extends Component<Props> {
  onBeforeLift = () => {
    // take some action before the gate lifts
  };
  render() {
    return (
      <Provider store={store}>
        <PersistGate persistor={persistor} loading={this.onBeforeLift()}>
          <Navigations />
        </PersistGate>
      </Provider>
    );
  }
}

接下来是切换时对应的每一个tab的页面
新闻页面
1037363-20190517145707281-750268889.png

//src/screens/news/News.js
//newsaction里面没有什么内容
import { actionTypes } from "./actionTypes";

const getNewsData = () => {
  return {
    type: actionTypes.NEWS
  };
};
export const news_action = {
  getNewsData
};
//src/saga/news_saga.js
import {
  put,
  call,
  takeLatest,
  takeEvery,
  fork,
  take,
  select
} from "redux-saga/effects";
import "whatwg-fetch";
import { actionTypes } from "../action/actionTypes";
import fetchSmart from "../service/fetch";
import { urlMap } from "../service/UrlMap";
function* getNews() {
  while (true) {
    yield take(actionTypes.NEWS);
    // fetchSmart(urlMap.bannerUrl)
    //   .then(response => {
    //     alert(response);
    //   })
    //   .catch(error => {
    //     alert(error);
    //   });
    fetch(urlMap.news_url, {
      method: "GET",
      headers: { Connection: "true" }
    })
      .then(response => response.json())
      .then(data => console.log("AAAAAdata is", data))
      .catch(error => console.log("AAAAAerror is", error));
    yield put({
      type: actionTypes.NEWS_SAGA,
      news_saga: Math.random(100 - 1)
    });
  }
}
export default function* root(): any {
  yield fork(getNews);
}

点击进入图片
1037363-20190517150258974-660086468.png
也是对里面的内容进行了模块的封装

//src/screens/picture/Picture.jsimport React from "react";
import { View, Button, Text, Image, StyleSheet, FlatList } from "react-native";
import { bindActionCreators } from "redux";
import index_action from "../../action/index_action";
import { connect } from "react-redux";
import TobNavigation from "./components/TopNavigation";

class Picture extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  _navigationStateChange = index => {
    this.props.actions.getRecommend(index);
  };
  render() {
    return (
      <TobNavigation
        onNavigationStateChange={(prevState, currentState) => {
          this._navigationStateChange(currentState.index);
        }}
      />
    );
  }
}

const styles = StyleSheet.create({});
const mapStateToProps = state => {
  return {};
};
const mapDispatchToProps = dispatch => {
  return {
    actions: bindActionCreators(index_action, dispatch)
  };
};
module.exports = connect(
  mapStateToProps,
  mapDispatchToProps
)(Picture);

1037363-20190517150854779-849895303.png

上面的是在图片目录下可以切换的内容
每一个screen对应的也是单独的页面

//src/screens/picture/components/TopNavigation.js
import { ColorSource } from "../../../sources/ColorSource";
import Recommend from "./Recommend";
import StarPic from "./StarPic";
import NewsPic from "./NewsPic";
import {
  createMaterialTopTabNavigator,
  createAppContainer
} from "react-navigation";
/**
 * createMaterialTopTabNavigator,实现顶部Tab栏的切换
 */
const TobBar = createMaterialTopTabNavigator(
  {
    Recommend: {
      screen: Recommend,
      navigationOptions: {
        tabBarLabel: "推荐"
      }
    },
    NewsPic: {
      screen: NewsPic,
      navigationOptions: {
        tabBarLabel: "新闻"
      }
    },
    StarPic: {
      screen: StarPic,
      navigationOptions: {
        tabBarLabel: "明星"
      }
    }
  },
  {
    tabBarOptions: {
      //tab bar的位置, 可选值： 'top' or 'bottom'
      tabBarPosition: "top",
      swipeEnabled: true,
      allowFontScaling: true,
      scrollEnabled: false,
      style: {
        backgroundColor: ColorSource.blue //设置顶部tab的背景颜色
      },
      //  设置下划线的颜色
      indicatorStyle: {
        backgroundColor: ColorSource.red
      },
      activeTintColor: ColorSource.red, //设置选中字的颜色
      inactiveTintColor: ColorSource.white //设置未选中的颜色样式
    },
    // style: { backgroundColor: ColorSource.red },
    initialRouteName: "Recommend"
  }
);

export default createAppContainer(TobBar);

这个是recommend组件
```js
//src/screens/picture/components/Recommend.js
//里面也还是有封装
import {
View,
Text,
FlatList,
Button,
Modal,
Image,
StyleSheet,
TouchableWithoutFeedback
} from "react-native";
import React from "react";
import { bindActionCreators } from "redux";
import index_action from "../../../action/index_action";
import { connect } from "react-redux";
import PictureListComponent from "./PictureListComponent";
class Recommend extends React.Component {
constructor(props) {
super(props);
this.state = {
recommend: [],
isShowModule: false,
pic: []
};
}
componentDidMount() {
this.props.actions.getRecommend(0);
}
render() {
const { recommend } = this.props;

return (
  <View>
    <PictureListComponent data={recommend} />
  </View>
);

}
}
const styles = StyleSheet.create({});
const mapStateToProps = state => {
return { recommend: state.picture_reducer.get("recommend") };
};
const mapDispatchToProps = dispatch => {
return {
actions: bindActionCreators(index_action, dispatch)
};
};
module.exports = connect(
mapStateToProps,
mapDispatchToProps
)(Recommend);
接下来进行的就是图片内的组件 这个只是封装的单个的图片组件js
//src/screens/picture/components/PictureListComponent.js
import React from "react";
import {
View,
VirtualizedList,
StyleSheet,
ScrollView,
RefreshControl,
Text,
Platform,
FlatList,
TouchableWithoutFeedback,
Image,
Modal
} from "react-native";
import PictureModule from "./PictureModule";
import { ColorSource } from "../../../sources/ColorSource";
type Props = {
data?: Array
};
class PictureListComponent extends React.Component {
constructor(props: Props) {
super(props);
this.state = {
isShowModule: false,
pic: []
};
}
_showPic(item, index) {
this.setState({
isShowModule: !this.state.isShowModule,
pic: item.pics
});
}
_emptyView = () => {
return (

暂无数据

);
};
_renderItem = ({ item, index }) => {
return (
<TouchableWithoutFeedback onPress={() => this._showPic(item, index)}>

<Image
source={{
uri: item.scover
}}
style={styles.image}
/>
{item.setname}


);
};
_ModalPic() {
if (this.state.pic.length > 0) {
return (
<Modal
onRequestClose={() => {
this.setState({
isShowModule: false
});
}}
visible={this.state.isShowModule}
>


);
}
}
render() {
return (

<FlatList
renderItem={this._renderItem}
data={this.props.data}
extraData={this.state}
keyExtractor={(item, index) => index.toString()}
numColumns={1}
ListEmptyComponent={this._emptyView()}
disableVirtualization={true}
/>
{this._ModalPic()}

);
}
}
const styles = StyleSheet.create({
emptyView: {
flex: 1,
alignItems: "center"
},
item: {
height: 180,
marginBottom: 10
},
name: {
position: "absolute",
marginLeft: "5%",
marginRight: "5%",
height: 50,
lineHeight: 50,
bottom: 0,
width: "90%",
backgroundColor: ColorSource.grey
},
image: {
height: 180,
width: "90%",
marginLeft: "5%",
marginRight: "5%"
}
});
module.exports = PictureListComponent;
js
//src/screens/picture/components/PictureModule.js
//这个里面的图片是可以点击滑动的意思
import React from "react";
import { View, Image, Text, StyleSheet } from "react-native";
import Swiper from "react-native-swiper";
class PictureModule extends React.Component {
constructor(props) {
super(props);
this.state = {};
}

_renderSwiper() {
let itemArr = [];
let dataArr = this.props.pic;
if (dataArr.length > 0) {
for (let i = 0; i < dataArr.length; i++) {
let pic = {
uri: dataArr[i]
};
itemArr.push();
}
}
return itemArr;
}
render() {
return (

{this._renderSwiper()}

);
}
}
const styles = StyleSheet.create({
image: {
flex: 1
}
});
module.exports = PictureModule;
js
//src/screens/picture/components/StarPic.js
//这个都不知道是做什么的～
import { View, Text } from "react-native";
import React from "react";
import { bindActionCreators } from "redux";
import index_action from "../../../action/index_action";
import { connect } from "react-redux";
import PictureListComponent from "./PictureListComponent";

class StarPic extends React.Component {
constructor(props) {
super(props);
}

render() {
const { star } = this.props;
return (



);
}
}

const mapStateToProps = state => {
return { star: state.picture_reducer.get("star") };
};
const mapDispatchToProps = dispatch => {
return {
actions: bindActionCreators(index_action, dispatch)
};
};
module.exports = connect(
mapStateToProps,
mapDispatchToProps
)(StarPic);
```
1037363-20190517152820053-1771273426.png

//视频页面什么都没有
//src/screens/video/Video.js
import React from "react";
import { View, Button, Text, Image, StyleSheet } from "react-native";
import { bindActionCreators } from "redux";
import index_action from "../../action/index_action";
import { connect } from "react-redux";

class Video extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <View />;
  }
}

const styles = StyleSheet.create({});
const mapStateToProps = state => {
  return {};
};
const mapDispatchToProps = dispatch => {
  return {
    actions: bindActionCreators(index_action, dispatch)
  };
};
module.exports = connect(
  mapStateToProps,
  mapDispatchToProps
)(Video);

关于我的页面
1037363-20190517152842585-756135841.png

//src/screens/mine/Mine.js
import React from "react";
import { View, Button, Text, Image, StyleSheet, FlatList } from "react-native";
import { bindActionCreators } from "redux";
import index_action from "../../action/index_action";
import { connect } from "react-redux";

export class Mine extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <View />;
  }
}

const styles = StyleSheet.create({});
const mapStateToProps = state => {
  return {};
};
const matchDispactchToProps = dispatch => {
  return {
    actions: bindActionCreators(index_action, dispatch)
  };
};
module.exports = connect(
  mapStateToProps,
  matchDispactchToProps
)(Mine);

看了半天原来数据是在redux-saga里面进行处理的啊

//src/saga/picture_saga.js
import {
  put,
  call,
  takeLatest,
  takeEvery,
  fork,
  take,
  select
} from "redux-saga/effects";
import "whatwg-fetch";
import { actionTypes } from "../action/actionTypes";
import fetchSmart from "../service/fetch";
import { urlMap, pic_url } from "../service/UrlMap";

function* getRecommend() {
  while (true) {
    const action = yield take(actionTypes.RECOMMEND);
    const index = action.index;
    const url = pic_url[index];
    try {
      const res = yield call(fetchSmart, url);
      if (index === 0) {
        yield put({ type: actionTypes.RECOMMEND_SAGA, recommend: res });
      } else if (index === 1) {
        yield put({ type: actionTypes.NEWS_SAGA, news: res });
      } else if (index === 2) {
        yield put({ type: actionTypes.STAR_SAGA, star: res });
      }
    } catch (e) {
      alert(e);
    }
  }
}
export default function* root(): any {
  yield fork(getRecommend);
}

转载于:https://www.cnblogs.com/smart-girl/p/10881634.html

weixin_30511039
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
水滴石穿C语言
07-11
水滴石穿C语言，一个系列
水滴石穿
春夏秋冬
03-30 295
离职后有时间了，不因着急找工作，总觉自己该锻炼下身体，整理下     从事JAVA开发也快5年了，不能在盲目的天天为了业务需求撸代码，     自己并不想当码农，不要逼着自己往码农防线发展，就要懂得如何去学习，如何去找对自己的方向     就从读书，写博客开始，慢慢积累，持之以恒，水滴石穿。
绳锯木断，水滴石穿。
Cool_Jhin的博客
10-23 34
本人莫大学生，希望通过学习、练习、复习、回顾、再学习能熟练掌握C/C++语言的使用。运用所学知识制作至少一款独立游戏，或者为喜欢的游戏制作出相关的MOD，为其添加新的乐趣。目前对于大厂暂时心无所属。发此文，仅用来开始记录自己的学习日常。
水滴石穿2
jovcve的专栏
07-25 248
水滴石穿2 　　一个美国本地人做了如下观察有关夏令时，“它就像切顶过毯子，它缝制的底部，一直处之泰然，它使毯更长的时间。”几乎每个人都犯订阅这个概念在这些我们今天生活的快节奏的时代，我们的精神福祉遭罪，因为我们甚至没有时间坐下来阅读圣经。音频圣经是把上帝话语回到你的生活的理想方式。 　　虽然可能没有时间坐下来阅读圣经，有许多方法，以适应口头语言到你忙碌的生活和精神效益是无法估量的。如果你经常使用家
【水滴石穿】MyFirstRNDemo
weixin_30455067的博客
05-21 77
比较简单的项目 //index.js /** @format */ import {AppRegistry} from 'react-native'; //默认创建的类 import App from './App'; //json import {name as appName} from './app.json'; //FlatList类 import DWBFlatList from '....
水滴石穿_csdn
08-19
水滴石穿
水滴石穿c语言-pdf格式
05-14
水滴石穿C语言之C语言的底层操作.pdf 水滴石穿C语言之extern声明辨.pdf 水滴石穿C语言之static辨析.pdf 水滴石穿C语言之编译器引出的.pdf 水滴石穿C语言之代码检查工具.pdf 水滴石穿C语言之可变参数问.pdf 水滴石穿...
水滴石穿C语言之C语言的底层操作.doc
11-28
水滴石穿C语言之C语言的底层操作.doc
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 382
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1007
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 510
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 301
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 405
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
css flex布局两个元素水平居中垂直居中
xiaohua616的博客
04-23 396
使用flex布局，让两个元素水平居中垂直居中，具体实现效果如下：
【内附完整redis配置文件】linux服务器命令设置redis最大限制内存大小，设置redis内存回收机制，redis有哪些回收机制
G佳伟
04-23 471
redis经常出现进程自己挂掉，经排查后是因为redis占用内存过大，导致服务器内存爆满进程自己挂掉。
使用vue3+ts+vite从零开始搭建bolg(二)
qq_75246137的博客
04-21 244
svg:用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。component中的index.ts,注册全局组件。package.json中的scripts配置项。vite.config.ts文档中配置。SvgIcon的index.vue文件。.env.development文件。.env.production文件。vite.config.ts配置。tsconfig.ts配置。.env.test文件。
JavaScript函数的作用域
猿码互联
04-23 171
JavaScript函数的作用域指的是变量的可访问范围。在JavaScript中，函数作用域是基于词法作用域（也称为静态作用域）的，意味着函数的作用域在函数被创建时就确定了，而不是在函数被调用时。这样创建的匿名函数会立即执行，并且其中的变量只能在函数内部访问，外部无法访问。这种方式在旧版本的JavaScript中很常见，但在ES6之后，可以直接使用块级作用域来实现同样的效果。需要注意的是，在ES6之前，JavaScript中并没有块级作用域的概念，只有函数作用域和全局作用域。
TypeScript学习笔记7-枚举
STATICHIT静砸的博客
04-23 264
如果中断了，那么下面的就从中断的地方继续增长。如果是字符串，那么定义的时候就要全部写上。主要作用就是节省因为枚举带来的性能消耗。如果是纯数字，下面的会进行自动增长。
编写80个暗语，每个暗语用一个两位数代表（只使用1到9这9个数字），为了进一步提高保密性，又对数字做了顺序替换。本次的传递的信息是：“有萝卜1.43元、白菜0.89元、芹菜2.56元、韭菜3.82元、蒜3.78元”，设计一个python程序已经知道，顺序替换方式是平移4个位置（如：1替换为5，……，9替换为4）。请提取信息中的数字（不包含0），并还原成原始数字后，输出一个新的字符串。提示：由于数字可以直接做算数运算，因此不需要转换成Unicode编码，可以直接通过mod运算实现平移。
03-26
76： 水滴石穿 77： 一击即中 78： 四面出击 79： 鼓足干劲 80： 滴水之恩，涌泉相报 代码实现如下： message = "有萝卜14.19元、白菜05.58元、芹菜29.60元、韭菜78.26元、蒜87.26元" num_dict = {'5': '1', '6': ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值