shooterrao / react-native-fruitstore Goto Github PK

用react-native+mobx开发一个简单的迷你水果商城，支持ios和android。Use react-native + mobx to develop a simple mini fruit mall that supports ios and android.

License: MIT License

JavaScript 85.17% Python 3.30% Java 3.81% Objective-C 7.71%

mobx react-native

react-native-fruitstore's Introduction

React-Native+Mobx开发一个简单的水果商城App

2018-12-15 更新

最近抽空把这项目的核心依赖全部升级了，具体更新如下:

react-native(0.57.7)
react-navigation(3.0.7)
mobX(5.7.0)
mobX-react(5.4.2)
引入eslint、prettier
iphonexs等比较新的设备的支持
根据react-navigation新的api重写路由
优化购物车mobX状态管理逻辑

旧版地址

如果您对此项目感兴趣，可以点Star支持下，非常感谢！(๑•̀ㅂ•́)و✧

技术博客

项目运行

git clone https://github.com/shooterRao/react-native-fruitStore.git 或者直接下载

cd react-native-fruitStore

yarn

android: react-native run-android
ios: react-native run-ios

实现功能

商品预览
加入购物车
商品的增删查改
模拟支付
清空购物车，还原商品初始状态
模拟下拉加载
页面的跳转和传值
查看订单列表(2018/1/8 增加)

效果演示

设备支持

总体效果

操作商品效果

购物流程效果

参考文档

mobX文档

react-navigation

UI参考于这款微信小程序wxapp-mall

License

MIT

react-native-fruitstore's People

Contributors

Stargazers

Watchers

react-native-fruitstore's Issues

TypeError: null is not an object (evaluating '_ReanimatedModule.default.createNode')

"dependencies": {
"@react-native-community/masked-view": "^0.1.10",
"babel-preset-react-app": "^10.0.0",
"mobx": "^6.1.8",
"mobx-react": "^7.1.0",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-native": "^0.63.4",
"react-native-easy-toast": "^2.0.0",
"react-native-gesture-handler": "^1.10.3",
"react-native-loading-spinner-overlay": "^2.0.0",
"react-native-scrollable-tab-view": "^1.0.0",
"react-native-swiper": "^1.6.0",
"react-navigation": "^4.4.4",
"react-navigation-stack": "^2.10.4",
"react-navigation-tabs": "^2.11.0"
},
"devDependencies": {
"@babel/core": "^7.13.10",
"@babel/plugin-proposal-decorators": "^7.13.5",
"@babel/runtime": "^7.13.10",
"@react-native-community/eslint-config": "^2.0.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.3",
"eslint": "^7.21.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-native": "^3.10.0",
"husky": "^5.1.3",
"jest": "^26.6.3",
"jsc-android": "^245459.0.0",
"lint-staged": "^10.5.4",
"metro-react-native-babel-preset": "^0.65.2",
"prettier": "^2.2.1",
"react-test-renderer": "^16.13.1"
},

现在报错如下：
[Fri Mar 12 2021 13:20:46.736] ERROR TypeError: null is not an object (evaluating '_ReanimatedModule.default.createNode')
[Fri Mar 12 2021 13:20:46.739] ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
[Fri Mar 12 2021 13:20:46.740] ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

这么麻烦的定义props的类型，为啥不使用typescript呢

APP没有全屏运行

生成的APP在手机上运行没有全屏显示哦，底部导航到屏幕底部还有很大一段距离，测试机型是小米8

iOS启动时，报错，TypeError: undefined is not an object (evaluating this._callListeners.bind')

Bug: application eslintApp has not been registered

下载运行报这个错，发现app.json中的name对不上，改成eslintApp即可

添加购物车有BUG

1.当选完商品至购物车不点购物车图标直接返回从底部导航进的话新添加的商品显示不了但是再从购物车图标那个入口进是可以看到的。
2.新添加一个商品然后再添加商品要把第一个商品删除才可以显示后面添加的商品
3.全选报错

mobx的使用

你好，在网上看到这个RN实例，也照着写了一遍。在使用mobx时做了一些修改，在你的例子中一些地方直接修改了store的数据，我本人也是刚接触mobx，对于mobx的合理使用也不太了解。下面是地址 https://github.com/baoxd/react-native/tree/master/FruitStore 。 MAC已经测试了

android启动是空白页

已解决端口被占用

missing s3.png?

似乎在img文件夹下缺少了几个图像

为啥执行npx react-native run-android 会报这个错误

FAILURE: Build failed with an exception.

What went wrong:
Execution failed for task ':react-native-gesture-handler:compileDebugJavaWithJavac'.

Compilation failed; see the compiler error output for details.

Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
Get more help at https://help.gradle.org

BUILD FAILED in 2s
25 actionable tasks: 1 executed, 24 up-to-date
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html