React Native入門編寫HelloWorld

在前期環境已經搭好的前提下，是不是已經有點迫不及待想要開始自己的第一個Demo之旅呢，那麼從HelloWorld開始吧。如未搭建好環境，請參照：https://blog.csdn.net/u012721519/article/details/80520331

 Ok,話不多說，Let's coding helloWorld吧。

1.建立react native項目，命名為FirstReactNative

指令：react-native init FirstReactNative      

2.利用Android studio打開已經建立的FirstReactNative項目，找到項目下的Android路徑打開即可。

Tips：

⑴打開後可能會遇到ErrorSSL peer shut down incorrectly的錯誤，不能編譯。詳情見：https://blog.csdn.net/u012721519/article/details/80520650

⑵  遇到unable to load script from assets 和could not connect to development server的錯誤不能正常運作。詳情見：https://blog.csdn.net/u012721519/article/details/80520778

⑶如遇到Application XXX has not been registered錯誤，不能正确運作。解決方案詳見：https://blog.csdn.net/u012721519/article/details/80521022

3.如無遇到步驟2中的問題，則直接運作該項目（模拟器真機均可），運作成功效果如下圖所示。

4.我們可以在App.js檔案中進行項目開發。如下添加View。

此處添加View代碼

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
	<Text style={styles.jimmy}>
          Hello, I am Jimmy.li
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}
           

樣式代碼：

jimmy: {

         fontSize:30,

         color:'#ff0000',

         margin:10,

         }
           

5.效果如下圖所示。

6.此時結束我們的小白之旅….

Good luck!

Write by Jimmy.li