- clone the repo
- cd to dir, and use yarn to install
- react-native upgrade, donot replace .babelrc
- rnpm link
- yarn run remotedev
- react-native run-ios
The picture is from the author of remotedev -- @zalmoxisus , the warning message is because react-native-vector-icons
is not linked properly.
But you can find the remotedev work as expected!
Android is also works! Tested on genymotion. If you can not run, make sure you run cmd adb reverse tcp:8000 tcp:8000
.
If you like to use more functional debugger, you may try this one: jhen0409/react-native-debugger. There is also a working example: jhen0409/react-native-debugger-mobx-example
It's a nice beginning for a new react native project with mobx architecture from mobx-react-native-template.
Install Dependencies:
-
NodeJS( ~> 6.2.2 )
$ brew update && brew install node
-
npm( ~> 3.10.3 )
-
rnpm
npm install -g rnpm
In iOS platform, Xcode
is needed.
In Android platfrom, Android studio
or Genymotion
is needed.
After finish install dependencies.
Then lauch it
$ git clone [email protected]:80percent/mobx-react-native-template.git && cd mobx-react-native-template
$ git remote rm origin
$ npm install
$ react-native upgrade
$ rnpm link
$ cp app/config/index.js.example app/config/index.js
$ react-native run-ios
orreact-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
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
- Add a new container component to
app/containers/
, some examples inapp/containers/
you can follow. - Add a new route to
app/navigation/routes.js
. - Refresh your app page
Question: How to debug app
ReactNative use chrome debugger by default. You need install chrome browser before debug your app.
iOS Simulator:
- Open your app
- Input
ctrl + command + z
( if not, trycommand + d
) - Choose
Open debugger
from the new modal. Now chrome will open a new page:http:https://localhost:8081/debugger-ui
- Select
pause on exception
in chrome debugger( optional ) - Refresh your app page( command + R )
Android:
- Open your app
- Input
command + m
- Choose
Open debugger
from the new modal. Now chrome will open a new page:http:https://localhost:8081/debugger-ui
- Select
pause on exception
in chrome debugger( optional ) - Refresh your app page( double click R )
see more: https://facebook.github.io/react-native/docs/debugging.html
Question: How to rename my project
- Update the name of
package.json
- Update the name of
index.ios.js
&index.android.js
rm -rf ios; rm -rf android;
react-native upgrade
rnpm install
It's all
- react layouts
- mobx best practices in react-native
- Running on android device
- Singed apk on android device
- Use ES7
- Two spaces instead of tab
- No state operations in your code