正文

reactnative入门编写helloworld(代码片段)

Summer-夏天  Summer-夏天  2022-12-08  154

关键词：

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

reactnative入门环境搭建与helloworld

前言目前关于ReactNative的教程很多，官方文档写的也不错，但是感觉大部分教程写的不是很清楚，导致我各种碰壁。因此我来写一个简洁的教程。本篇文章基于ReactNative0.43，只适用于用Windows平台的Android开发者。1.配置ReactNative首... 查看详情

reactnative入门-环境搭建,创建第一个helloworld(代码片段)

CreateReactNativeApp 是开始构建新的ReactNative应用程序的最简单方法。它允许您启动项目而无需安装或配置任何工具来构建本机代码-无需安装Xcode或AndroidStudio。先安装Node.Js，则可以使用npm来安装create-react-native-app命令行实用程序... 查看详情

reactnative入门——环境搭建及第一个rn项目—helloworld(代码片段)

ReactNative入门——本篇以及接下来的几篇有关RN的文章，是默认你对前端相关知识如Node，React，以及原生移动端Android可以熟练使用的情况下（最起码达到了解会用的程度）为前提的！不然你就需要先去了学... 查看详情

reactnative入门——环境搭建及第一个rn项目—helloworld(代码片段)

reactnative入门atom+nuclide安装配置与调试

...Native入门前言上一篇文章我们搭建了开发环境，并写了个HelloWorld。这一节我们来学习ReactNative的开发IDE：Atom+Nuclide的安装、配置与调试。本文所讲的内容只适用于Mac平台。1.开发IDE选择ReactNative的开发IDE有很多种，比如FaceBook官方... 查看详情

helloworld入门程序(代码片段)

...a程序开发三步骤：编写、编译、运行。代码实现publicclassHelloWorld//程序的起点publicstaticvoidmain(String[]args)System.out.println("helloworld");入门程序说明：编译和运行是两回事编译：是指将我们编写的Java源文件翻译成JVM 查看详情

selenium3快速入门:如何编写第一个脚本helloworld!

从0开始编写Selenium3脚本。解决自动化小白们最害怕的环境配置等问题，从最简单脚本开始，从最干净的环境开始，结果导向，一步步到自动化框架的实践过程。所需工具：1.IDE+JDK+浏览器(可依实际项目自定义)2.Selenium3驱动及jar包... 查看详情

helloworld入门程序(代码片段)

...编写Java源程序在任意目录新建文本文件，文件名修改为HelloWorld.java，其中文件名为HelloWorld，后缀名必须为.java。在文件中输入文本并保存，代码如下：classHelloWorldpublicstaticvoidmain(String[]args)System.out.println("HelloWorld!");第一... 查看详情

java入门-helloworld

HelloWorld新建一个文件夹存放代码新建一个java文件文件后缀名为.javaHello.java编写代码publicclassHello{ publicstaticvoidmain(String[]args){ System.out.print("Hello,world!"); } }编译javacjava文件，会生成一个class文件运行class文件javaclass文件可能遇到的查看详情

springboot-入门helloworld(代码片段)

文章目录SpringBoot-入门HelloWorld1.系统要求2.HelloWorld2.1创建maven工程2.2引入依赖2.3创建主程序2.4编写业务2.5测试2.6简化配置2.7简化部署SpringBoot-入门HelloWorld1.系统要求Java8Maven3.3+idea2019+2.HelloWorld需求：浏览发送/hello请求࿰... 查看详情

react入门01-helloworld(代码片段)

前言基于项目需求，最近开始不得不接触前端开发的领域啦。吼吼，从此是不是可以自称全栈开发了🤣～此系列学习笔记依然是以帮助自己学习、消化以及回忆为目的，将会涉及学习React，TypeScript以及目... 查看详情

react入门01-helloworld(代码片段)

reactnative入门基础(代码片段)

一、前言ReactNative是Facebook推出的使用React和平台原生功能来构建Android和iOS应用的开源移动跨平台框架;-视图（Views）和移动开发在Android和iOS移动应用中，一个视图是UI的基本组成部分：屏幕上的一个小矩形元素、... 查看详情

thrift入门之helloworld

不多说，先看项目结构首先先编写一个hello.thrift的文件hello.thriftnamespacejavasawshawserviceHelloServicestringhello(1:stringmethod,2:stringparam)　注意了，这个namespace是　thrif根目录下tutorial目录的gen-java目录下的，如果没有这个目录，先cmd到tutoria... 查看详情

3helloworld入门程序(代码片段)

...在编写java源程序时，使用记事本就可以了，新建文件夹HelloWorld，后缀名改为.java。　　打开该文件，输入：1publicclassHelloWorld2publicstaticvoidmain(String[]args)3System.out.println("Hello,World!");453.3如何编译运行Java文件　　首先启动cmd窗口并... 查看详情

reactnative快速入门之认识props和state

眼下ReactNative（以后简称RN）越来越火，我也要投入到学习当中。对于一个前端来说，还是有些难度。因为本人觉得这是一个App开发的领域，自然是不同。编写本文的时候，RN的版本为0.21.0。我们马上以代码进入今天的学习。‘use... 查看详情