开发一个基于React Native的简易demo--前记

最新推荐文章于 2025-10-13 04:51:51 发布
原创 最新推荐文章于 2025-10-13 04:51:51 发布 · 2.7k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react-native

本文记录了作者在学习React Native过程中制作的一个简单demo，涵盖了React Native的基础样式和布局、react-navigation导航、轮播图及视频播放等功能。开发环境包括Android、Windows、Genymotion模拟器和VSCode。测试数据来源为网络json和mp4视频链接。

这阵子在学习react native， 说实话，坑真多！！！学习的过程也是不断的踩坑，艰难前进，这几天也断断续续的做了一个非常简单的demo.


用到的技术：

  • react native 样式、布局

  • react-navigation

  • 轮播图

  • react-native-video

  • 网络


平台：

Android、window系统 、Genymotion模拟器、vscode、已经配好的react native 环境


准备条件：


效果如下：


这里写图片描述


这里写图片描述


这里写图片描述


这里写图片描述


下一篇：开发一个基于React Native的简易demo–导航栏+轮播图
开发一个基于React Native的简易demo--导航栏+轮播图
小浩子的博客
12-07 2962
文件位置：App.js一、导航栏 引进react-navigation组件，详细用法见官网：https://reactnavigation.org yarn add --save react-navigation react-native run-android 编码 1.在文件开头引进react-navigationimport { TabNavigator } from "react-navig
开发一个基于React Native的简易demo--视频组件+布局
小浩子的博客
12-07 2418
一、视频组件 这里用：react-native-video，详见官网：https://github.com/react-native-community/react-native-video 添加组件 yarn add --save react-native-video react-native link我很幸运，两个命令都成功了，如果link不成功，跟着这篇文章：https://www.npmjs
React Native Demo
02-22
一个关于react-native 的demo， 各种控件比较齐全，基于2018-2-22最新的RN写就！
React-Native官方demo(对应 最新v0.55.0版本20180620编译)
06-20
2018年6月20最新编译React-Native官方demo,可直接运行版本。对应执行如下命令： 1.D:\reactnative\RNTester> react-native bundle --platform android --dev false --entry-file js/RNTesterApp.android.js --bundle-output android/app/src/main/assets/RNTesterApp.android.bundle --assets-dest android/app/src/main/res/ 2.D:\reactnative\RNTester\android>gradlew :app:installDebug
5分钟搞定React Native支付集成：Stripe与PayPal双方案实战
最新发布
gitblog_00454的博客
10-13 772
你还在为React Native应用集成支付功能头疼吗？iOS和Android平台适配复杂？支付流程繁琐易出错？本文将带你用create-react-native-app快速实现Stripe和PayPal支付功能，无需原生开发经验，零基础也能上手。 读完本文你将获得： - 两种主流支付方案的完整集成步骤 - 跨平台支付界面的实现方法 - 支付状态管理的最佳实践 - 真实项目中的常见问题解决方案 ...
react-native-demo:React Native演示应用
04-30
＃相同的骑行演示 请注意：该代码不适用于生产用途。 这只是概念证明 ###支持的输入 要查看地图小部件的工作方式，您需要输入以下城市： 纽约 泽西城 纽瓦克 欧文顿 纳特利 ###支持的设备 应用程序已在iPhone 5s，5c，6、6 plus，6s，6s plus上进行了测试 ###申请流程 ###在Xcode中运行 克隆此存储库 在Xcode中打开ios / CompanionsApp.xcodeproj 运行项目 ###运行开发 克隆此存储库 npm install npm start或npm hot如果要启用热重装） 在Xcode中打开ios / CompanionsApp.xcodeproj 打开文件AppDelegate.m并取消和评论 运行项目
react-native demo 开发环境
徐同保的专栏
01-26 2801
expo go官网： https://expo.dev/ 安装脚手架： yarn global add expo-cli 创建项目并启动： expo init my-app cd my-app yarn start expo 开发者工具： 手机下载调试软件： 保证手机和电脑在同一个局域网中用苹果手机的照相机扫描expo开发者工具中的二维码即可： 代码： 在电脑安装安卓模拟调试： android-studio下载并安装： https...
React Native八大Demo
08-02 648
参考资料：http://www.cnblogs.com/shaoting/p/7148240.html 下一个项目公司也打算使用react native.大致看了下原型设计,写几个小demo先试试水.特此记录下. 1.微信及朋友圈分享.QQ及朋友圈分享,微博分享,微信支付,支付宝支付. 2.导航条渐隐 3.通讯录 4.卡片式轮播 5.时间轴 6.图片+列表的组合效果 ...
开发一个基于React Native的简易demo--源码
小浩子的博客
12-07 766
这几篇博客的最终目地是为了给我自己做笔记，所以我不管文章对其他人有没有帮助。只为我自己！！！源码：/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react'; import { Platform,
React Native开发经验分享：打造简易新闻客户端
- **简易新闻客户端Demo**：通过创建一个简易新闻客户端项目，开发者可以实践如何使用React Native构建真实世界的应用。这包括获取新闻数据、展示列表、页面导航等功能。 - **混合使用React Native和原生代码**：在...
React Native模块简易上传npm教程与Demo展示
React Native 是一个由 Facebook 开发的开源框架，用于使用 JavaScript 和 React 构建原生移动应用。开发者可以使用 JavaScript 中的 React 概念来编写应用，同时生成原生组件，这允许应用在 iOS 和 Android 上拥有...
基于react-native的APP示例
03-21
基于react-native的简单APP示例，使用了listview tabbar navigator wegview等等,xcode 7.2编译运行
react native demo
12-30
react native demo 运行。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
REACT-NATIVE案例
07-18
REACT-NATIVE案例，模仿ireading阅读模式，已经写好的支持android和ios双系统app，解压后打开文件，npm install安装，然后react-native run-android/ios即可
reactNativeDemo:reactNative初学者demo
04-30
reactNativeDemo reactNative初学者demo 介绍 根据reactNative零基础教程编写的实例 教程中是用ES5写的ios版 我是用ES6写的android版 安装与运行 npm install react-native run-android 组件 Text, View, Image,TabNavigator,Navigator,WebView,TouchableOpacity,ListView, ScrollView TabNavigator是github上开源的一个rn组件，是适用于ios和安卓两个平台的底部导航栏 npm install react-native-tab-navigator --save import TabNavigator from 'react-native-tab-navigator';
react native 实现app demo
12-07
一个基础的react native & react-navigation V2 最新的 app框架react native 实现app demo
基于React Native的跨三端应用架构实践
Charlie8915的博客
12-28 321
作者｜陈子涵 编辑｜覃云 “一次编写, 到处运行”(Write once, run anywhere ) 是很多前端团队孜孜以求的目标。实现这个目标，不但能以最快的速度，将应用推广到各个渠道，而且还能节省大量人力物力。 React Native 的推出，为跨平台的开发带来了新的曙光。 虽然 Facebook 官方 blog 的说法 React Native 支持“Learn onc...
一个简单的ReactNative demo
夏洛克的猫
08-24 1691
本人非前端,请轻喷 ReactNative版本:0.31 github:https://github.com/X-FAN/reactnativelearn代码做了一些简单的注释,下面是源码import React, { Component } from 'react'; import { AppRegistry, Navigator, ToastAndro
React Native实例
weixin_30291791的博客
06-24 238
本文主要包括以下内容 View组件的实例 Text组件实例 Navigator组件实例 TextInput组件实例 View组件的实例 效果如下 代码如下 /** * Sample React Native App * https://github.com/facebook/react-nat...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值