React Native入门编写HelloWorld

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012721519/article/details/80521483

在前期环境已经搭好的前提下，是不是已经有点迫不及待想要开始自己的第一个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