React Native入门编写HelloWorld

Posted 2022-11-26 Summer-夏天

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