【免费】ReactNative仿网易新闻APP资源-CSDN文库

共133个文件

png：50个

js：24个

ttf：11个

需积分: 0 80 浏览量更新于2022-11-02 收藏 2.08MB ZIP 举报

ReactNative是一种由Facebook开发的开源框架，用于构建原生移动应用程序。它允许开发者使用JavaScript和React库来编写可跨平台的iOS和Android应用，极大地提高了开发效率和代码复用性。"ReactNative 仿网易新闻APP"项目是基于这个框架实现的一个示例，旨在展示如何运用ReactNative技术构建一个类似网易新闻的应用程序。该项目包含以下核心知识点： 1. **React组件化**：ReactNative沿用了React.js的组件化思想，通过将UI拆分成独立、可重用的组件，可以更方便地管理和维护代码。在“仿网易新闻APP”中，每个模块（如头条、体育、娱乐）以及新闻详情页都可以看作是独立的组件。 2. **JSX语法**：JSX是JavaScript和XML的融合语法，用于描述React组件的结构。在项目中，开发者会使用JSX来定义UI布局和交互逻辑。 3. **样式处理**：ReactNative采用原生样式系统，支持CSS-like语法来定义组件样式，但不完全兼容CSS。在“仿网易新闻APP”中，开发者需要理解如何使用Flexbox布局来实现响应式设计。 4. **网络请求与数据处理**：新闻内容通常来自服务器API。项目中可能使用了像`fetch`或第三方库如`axios`进行HTTP请求，获取JSON数据，然后解析并渲染到界面上。 5. **状态管理**：在复杂应用中，状态管理是关键。ReactNative可以使用`useState`或`useContext`等钩子进行简单的状态管理，对于更复杂的场景，可能会引入Redux或MobX等第三方库。 6. **导航**：在多页面应用中，导航是非常重要的部分。“仿网易新闻APP”可能使用了ReactNavigation库，提供堆栈导航、抽屉导航等多种导航方式。 7. **动画与触摸反馈**：ReactNative支持原生动画，可以利用`Animated`库创建平滑的动画效果。同时，为了提供良好的用户体验，应用还可能实现了触摸反馈，如按钮按下效果。 8. **平台特定的API集成**：ReactNative允许直接调用iOS和Android的原生功能，如推送通知、地理位置服务等。在“仿网易新闻APP”中，如果包含这些功能，开发者需要了解如何使用`Platform`模块来区分不同平台的实现。 9. **热更新与调试**：ReactNative支持热更新，可以在不重启应用的情况下更新代码，提高开发效率。开发者还可以使用React Native Debugger或Chrome开发者工具进行实时调试。 10. **性能优化**：考虑到移动设备的资源限制，性能优化是必要的。这可能涉及到减少渲染次数、避免状态冗余、使用PureComponent或React.memo减少组件不必要的重渲染等。通过“ReactNative 仿网易新闻APP”项目，开发者不仅可以学习到ReactNative的基本用法，还能深入了解如何构建实际的移动应用，包括数据获取、用户交互、导航、性能优化等多个方面，从而提升自己的全栈开发能力。

收起资源包目录

ReactNative 仿网易新闻APP （133个子文件）

.babelrc 37B

gradlew.bat 2KB

BUCK 2KB

BUCK 160B

.buckconfig 120B

.flowconfig 2KB

i_loading.gif 4KB

.gitattributes 17B

.gitignore 816B

build.gradle 7KB

settings.gradle 914B

build.gradle 666B

gradlew 5KB

AppDelegate.h 467B

gradle-wrapper.jar 51KB

MainApplication.java 2KB

RNNativeModule.java 1KB

RNPackage.java 910B

MainActivity.java 669B

i_user.jpg 6KB

HomeFlatList.js 12KB

VideoPlayer.js 11KB

VideoFlatList.js 10KB

ScreenUtil.js 9KB

Mine.js 9KB

Home.js 7KB

NewsDetail.js 7KB

VideoDetail.js 7KB

Live.js 6KB

App.js 6KB

NewsSearch.js 6KB

Video.js 3KB

ListItem.js 2KB

RouteConfigs.js 2KB

StackNavigatorConfig.js 2KB

RequestUrl.js 2KB

TabNavigator.js 2KB

Header.js 2KB

fetch.js 2KB

store.js 2KB

imgs.js 1KB

App.js 279B

index.js 256B

index.js 131B

package-lock.json 340KB

package.json 1KB

Contents.json 622B

Contents.json 69B

app.json 62B

yarn.lock 223KB

NeteaseNewsTests.m 2KB

AppDelegate.m 2KB

main.m 528B

README.md 3KB

project.pbxproj 78KB

Info.plist 2KB

Info.plist 789B

launch_screen.png 608KB

icon_back@2x.png 16KB

icon_back@3x.png 16KB

icon_back.png 15KB

icon_control_full_screen.png 15KB

list_placeholder.png 14KB

logo.png 14KB

ic_launcher.png 4KB

img_top_shadow.png 3KB

icon_video_play.png 2KB

icon_video_pause.png 2KB

icon_control_pause.png 2KB

icon_control_play.png 2KB

i_night.png 2KB

i_mine_foc.png 1KB

i_24h.png 1KB

i_search_grey.png 1KB

i_mine.png 1KB

i_search.png 1KB

i_home_foc.png 1KB

icon_right.png 1KB

icon_control_shrink_screen@3x.png 1KB

icon_control_full_screen@3x.png 1KB

i_home.png 1KB

i_live_foc.png 1KB

img_bottom_shadow.png 1KB

icon_control_slider.png 1KB

icon_control_shrink_screen@2x.png 1KB

icon_control_full_screen@2x.png 1KB

i_vote_red.png 1KB

i_vote_black.png 1KB

i_live.png 1KB

icon_control_shrink_screen.png 1KB

i_reply.png 1014B

i_video_foc.png 978B

i_hot.png 962B

i_sign.png 932B

共 133 条

资源推荐

资源预览

资源评论

# NeteaseNews 这是一个ReactNative仿网易新闻APP的Demo. ## 启动页： ![Image text](https://github.com/h406621397/ImageRepository/blob/master/Screenshot_1524643809.png) ## 首页： ![Image text](https://github.com/h406621397/ImageRepository/blob/master/Screenshot_1522724420.png) ## 图文新闻详情页： ![Image text](https://github.com/h406621397/ImageRepository/blob/master/Screenshot_1522721716.png) ## 视频半屏效果： ![Image text](https://github.com/h406621397/ImageRepository/blob/master/Screenshot_1523522615.png) ## 视频全屏效果： ![Image text](https://github.com/h406621397/ImageRepository/blob/master/Screenshot_1523522641.png) ## 视频: ![Image text](https://github.com/h406621397/ImageRepository/blob/master/Screenshot_1523522342.png) ## 我的: ![Image text](https://github.com/h406621397/ImageRepository/blob/master/Screenshot_1523170589.png) ## 热更新： ![Image text](https://github.com/h406621397/ImageRepository/blob/master/Screenshot_1524805643.png) # 运行项目： 1、NeteaseNews目录下执行yarn或npm i 命令。 2、执行react-native run-android或npm run android命令。 # 基本功能： 1、使用react-native-tab-navigator实现APP底部菜单切换 2、首页和视频页使用FlatList实现下拉刷新/上拉加载功能 3、首页和视频页使用react-native-scrollable-tab-view实现选项卡切换栏目新闻功能 4、使用react-native-htmlview实现图文新闻详情页功能 5、使用react-native-video、react-native-orientation实现视频新闻详情页功能 6、安卓下添加了对GIF图片的支持(IOS默认支持) 7、使用react-native-splash-screen添加了APP启动页，避免APP启动白屏 8、"我的"页面添加了RN动画 9、添加了storage(数据存储)、elements(UI组件)、swiper(滑动)、vector-icons(图标)等常用库 10、使用CodePush实现了热更新功能，可静默更新或提示更新 # 项目中的问题： 1、路由页面切换时的自定义动画效果存在BUG 2、当页面存在FlatList组件时，在componentWillMount/componentDidMount里start一个无限循环的动画导致FlatList列表数据不显示。 3、borderRadius在android低版本(目前测试的4.1.2)下的绘制不完美 4、视频在全屏状态下，低版本android对StatusBar hidden的兼容问题 # 其它： * 由于接口权限原因，打开新闻详情页面、视频页面时可能出现空白，无法正常请求到新闻数据显示。 * 直播和新闻评论功能尚未开发，有相关接口的童鞋可以私我共同开发学习。