RN 学习之开始篇

安装：

npm install -g react-native-cli

查看当前版本：

react-native --version

我自己当前的版本是：react-native-cli: 2.0.1，react-native: 0.51.0

创建：

react-native init FirstProject

运行 APP (iOS)：

cd FirstProject
react-native run-ios

运行 APP (Android)：

cd FirstProject
react-native run-android

创建目录如下：

+ __tests__
+ ios
+ android
+ node_modules
- package-lock.json
- package.json
- app.json
- index.js
- App.js

写上“Hello, world!”：
把App.js里面的代码全部删了，写上下面的代码：

import React, { Component } from 'react';
import { Text } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <Text>Hello, world!</Text>
    );
  }
}

当然你写上这段代码后悔看到的效果是——
“Hello, world!”，这段文字的位置在屏幕左上角顶部开始的。

调整一下代码：

import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    Platform
} from 'react-native';

const instructions = Platform.select({
  ios: 'Hello, iOS!',
  android: 'Hello, Android!',
});

export default class App01 extends Component<{}> {
  render() {
    return (
            <View style={styles.container}>
                <Text> Hello, world! </Text>
                <Text> {instructions} </Text>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  }
});