A react-native template using advanced mobx Architecture
It's an experienced template for a new react native project with mobx architecture from react-native-template-mobx.
这是一个有经验的 React Native 和 mobx 融合的脚手架项目.
Notice: This project has renamed from
mobx-react-native-template
toreact-native-template-mobx
because of the convention of React Native Template published at React Native 0.43 version. here is the link
react-native-template-mobx has supported react native 0.44.
Install Dependencies:
NodeJS( ~> 6.2.2 )
$ brew update && brew install node
yarn
$ npm install -g yarn
rnpm
npm install -g rnpm
On iOS platform, Xcode
is needed.
On Android platfrom, Android studio
or Genymotion
is needed.
After finish install dependencies, we can launch the template easily.
Replace
xxx
to your real project name.
$ npm install -g react-native-cli
$ react-native init xxx --template mobx
$ cd xxx
$ yarn add babel-plugin-transform-decorators-legacy --dev
$ cat gitignore >> .gitignore; rm gitignore
At last, launch it to check.
iOS:
react-native run-ios
Android:
react-native run-android
Done.
You need start an iOS simulator or android simulator before running your app, see more: https://facebook.github.io/react-native/docs/getting-started.html
We have developed several commercial native apps with React Native at the last year, the template is the key we can make them successfully.
First, mobx is the key of the template. If you also love mobx, you should choose this template. with zero-configuration, you can use mobx.
Second, we apply some useful react-native components for you, of course, zero configuration:
Third, we provide a nice directory construction for your new project, clean and clear.
At last, we provide the most common tabbar routers example, see more detail into the directory app/
.
And we are improving the template continually.
Mobx is a new architecture to manage your store data. Unlike redux or flux, there's just a fewer concepts to understand and it's very simple to use.
See more usage into the directory app/
.
Question: How to create a new page
app/containers/
, some examples in app/containers/
you can follow.app/navigation/index.js
.Question: How to debug app
ReactNative use chrome debugger by default. You need install chrome browser before debug your app.
iOS Simulator:
ctrl + command + z
( if not, try command + d
)Open debugger
from the new modal. Now chrome will open a new page: http://localhost:8081/debugger-ui
pause on exception
in chrome debugger( optional )Android:
command + m
Open debugger
from the new modal. Now chrome will open a new page: http://localhost:8081/debugger-ui
pause on exception
in chrome debugger( optional )see more: https://facebook.github.io/react-native/docs/debugging.html
Question: How to rename my project
package.json
index.ios.js
& index.android.js
rm -rf ios; rm -rf android;
react-native upgrade
rnpm install
It's all