從零搭建React Native項目

reat native項目搭建，跟着官網文檔——搭建環境，其實不難，不過新手可能還是會有些地方，覺得難理解，所以，寫個博客，希望第一次用reat native的小夥伴，可以節省點時間，快速搭建項目，跑起Hello Word

開發平臺是windows，目標平臺是Android，

1.安裝依賴有：Node、Python2、JDK 和 Android Studio、Yarn。

這裏，文檔建議Node換淘寶鏡像，我並沒有換，但也不覺得慢，小夥伴可以試試，換了會不會快一些

然後，Python2，如果已經裝了Python3，可以再裝一個Python2，這兩個版本是可以共存並切換使用的，可以參考：

windows下通過cmd切換python2和python3版本，至於JDK 和 Android Studio，Yarn, 直接按照官網文檔下載安裝，即可

2.搭建好環境，就可以創建項目了，win+R 打開命令行，進入你想要存放項目的文件路徑，比如我的項目存放在G:\myProject\rn-demo，然後輸入命令： npx react-native init AwesomeProject ，創建一個名爲AwesomeProject的reat native項目，

如果報錯yarn有問題，則需要設置一下，再重新輸入命令創建，即可

報錯：

解決：

完成：

3.接下來，是編譯並運行reat native項目

注意，運行前需要先在andorid studio，打開安卓手機模擬器，再在命令行：yarn android，運行項目

4.寫出hello word

在andorid studio 打開該項目，將App.js替換成以下代碼：

App.js:

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

export default class HelloWorldApp extends Component {
  render() {
    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
          <Text style={styles.title}>Hello, world!</Text>
          <Text style={styles.content}>你的第一個react native已經跑起來了！！</Text>
        </View>
    );
  }
}
const styles = StyleSheet.create({
  title: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  content: {
    fontSize: 20,
  },
});

 

效果：