React-native start

After installing react native environment, I try to build my first react native app on android.

Actually, it’s easy (not that hard) to develop native app using react native, cause the structure of react is simple.   However, getting a deep understanding of the components provided by react native needs time.

Setup

We should start at setting up react-native-cli globally, which is a command line interface that help to do the rest of setup. After installing react-native-cli, we can use command ‘react native’ for init a new project, build project and so on.

npm install -g react-native-cli

Init a New Project

React native provide generator for us to build new project.

react-native init ProjectName

Run Your Project

1. Start simulator manually

2. Build app

This will install the generated app on your emulator or device, as well as start the Node server which enables live code reloading.

If you have added new resources or modified any native code you will need to re-build the app for the changes to take effect.

react-native run-android

3. Start Server

Actually, I have no idea which server is started.

React-native start

Styles

React native don’t support css, it use Javascript to style our app.

Declare

When declaring style, we should declare it like this.

var styles = StyleSheet.create({
base: {
width: 38,
height: 38,
},
background: {
backgroundColor: ‘#222222’,
},
active: {
borderWidth: 2,
borderColor: ‘#00ff00’,
},
});

Use

<View style={styles.background} />

<View style={[styles.base, styles.background]} />

Tips

1.We can add js grammer when using style. like:

<View style={[styles.base, this.state.active && styles.active]} />
2. React native provide FlexBox for layout, we can find more details here:

Dubugging

We can see console by typing this command :

adb logcat *:S ReactNative:V ReactNativeJS:V

We can see detailed information here

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s