，，

⇔⇔复制到剪贴板我喜欢React Native复制到剪贴板从"React"导入React；从"react native"导入{StyleSheet，Text，View}；渲染（）{返回(立即开始构建移动应用程序...常量样式=样式表.create({集装箱：{弹性：1，云服务器买哪个好，背景色："#fff"，alignItems:'居中'，justifyContent:'中心'，},});小步骤：柜台AppNo，我们不是从一个"Hello World"应用程序开始的。我们将使用React构建一个简单的counter应用程序，并将其转换为React原生应用程序。这种方法鼓励您简单地使用现有的React知识来构建React原生应用程序，而不需要任何麻烦。我们开始吧开始。设置升级安装create react app node模块。这个工具帮助我们在不到分钟。收到到剪贴板npm安装-g创建react应用程序现在，通过命令运行createreact app命令行：复制到剪贴板创建react应用程序计数器cd计数器在src目录中创建一个components文件夹。这个文件夹将容纳我们的柜台组件。创建计数器组件复制到剪贴板导入React，{Component}来自'React'；类计数器扩展组件{状态={计数：52}渲染（）{常数{count}=这个州;返回(计数：{Count}增量减量重置);}}导出默认计数器；按钮当前处于非活动状态。让我们添加能够操纵状态的功能。添加handleIncrement、handleDecrement和reset方法。复制到剪贴板...手柄增量=（）=>{此设置状态({计数：this.state.count+1});}手工凭证=（）=>{此设置状态({计数：this.state.count-1});}重置=（）=>{//也可以将函数传递给setState此设置状态({计数：52});}我们几乎完成了组件。现在，大数据数据库，通过为按钮。收到到剪贴板...渲染（）{常数{count}=这个州;返回(计数：{Count}增量减量重置);}在中调用计数器组件App.jsCopy版到剪贴板导入React，{Component}来自'React'；从'./components/Counter'导入计数器；导入'/应用程序.css';类应用程序扩展组件{渲染（）{返回(

);}}导出默认应用程序；现在，再次测试你的应用程序。它应该能正常工作，如图所示下面。转换React Counter App to React Native App我们必须采取以下几个步骤：从React native导入所需的本机组件。创建计数器.js在app根目录中导入文件，然后从React导入所需的本机组件本地。复制到剪贴板导入React，{Component}来自'React'；从"react native"导入{StyleSheet，Text，View，Button}；添加类方法，并将render（）Copy中的某些组件替换到剪贴板...类计数器扩展组件{状态={计数：52}手柄增量=（）=>{此设置状态({计数：this.state.count+1});}手工凭证=（）=>{此设置状态({计数：this.state.count-1});}重置=（）=>{此设置状态({计数：52});}渲染（）{常数{count}=这个州;返回(计数：{Count});}}检查以下更改：变成了变成了变成了onClick变成了新闻发布会我们添加了一个title属性，因为React Native中显示在按钮内部的文本必须是按钮title属性的值。在中导入计数器组件App.jsCopy版到剪贴板从"React"导入React；从"react native"导入{StyleSheet，Text，View}；从'./Counter'导入计数器；导出默认类应用程序扩展反应组分{渲染（）{返回();}}常量样式=样式表.create({集装箱：{弹性：1，背景色："#fff"，alignItems:'居中'，justifyContent:'中心'，},});运行应用程序。npm运行ios for ios，npm运行android for android。下面的演示是React Native iOS应用程序。这个不是很漂亮。按钮看起来不像按钮。它们看起来就像是挂在空白处的文本。在React Native Android中更改按钮的背景颜色只需添加颜色即可属性：复制到剪贴板但是，在React Native iOS中，过程是不同的。颜色属性只改变文本的颜色。背景色保持不变。让我们使用一个更好的组件TouchableOpacity，如下所示：Counter.jsCopy到剪贴板从"react native"导入{StyleSheet，Text，淘客源码，View，Button，Image，TouchableOpacity}；. . .重置在计数器.js像这样的文件：复制到剪贴板常量样式=样式表.create({重置按钮：{背景色："#4583c9"，p加总人数：10,帕德底部：10,},重置文本：{颜色："#fff"，textAlign:"居中"，向左填充：10，填充10：右}});你的重置按钮应该看起来像图片中的按钮下图：有使用TouchableOpacity API可以完成很多事情。检查文档的不同样式和更改按钮的方式陈述。结论是React Native的介绍。开发React Native应用程序需要您在React Native Android和iOS文档之间频繁切换，大数据算法，永久免费自助建站平台，以了解组件如何工作并在屏幕上显示这两个设备。管理状态和使用道具与React相同。你也可以用雷德克斯。你很快就会建立媒体丰富的移动应用程序！注意对于直接移动路径，Cloudinary提供Android和iOS SDK解决方案。在本教程的下一部分中，我们将为Android和iOS平台构建一个带有React Native的图像查看器应用程序。敬请期待！