正文

match的reactnative入门之旅(代码片段)

张旭童  张旭童  2022-12-10  142

关键词：

这是一篇学习笔记，注意事项的文章。
文中的资料绝大部分出自React中文网

一搭建开发环境

运行

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

三 State（状态）

我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。

一般来说，你需要在constructor中初始化state（ES5:getInitialState方法来初始化state），然后在需要修改时调用setState方法。

五样式

只是按照JS的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。

style属性可以是一个普通的JavaScript**对象。这是最简单的用法，因而在示例代码中很常见。你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高**，这样你可以间接实现样式的继承。

实际开发中组件的样式会越来越复杂，我们建议使用StyleSheet.create来集中定义组件的样式。

class LotsOfStyles extends Component 
  render() 
    return (
      <View>
        <Text style=styles.red>just red</Text>
        <Text style=styles.bigblue>just bigblue</Text>
        <Text style=[styles.bigblue, styles.red]>bigblue, then red</Text>
        <Text style=[styles.red, styles.bigblue]>red, then bigblue</Text>
        <Text style=[styles.bigblue,color:'black'] > display</Text>
      </View>
    );
  


const styles = StyleSheet.create(
  bigblue:
    color:'blue',
    fontWeight:'bold',
    fontSize:30,
    color:'red',
  
);

六高度与宽度

指定宽高

在样式中指定固定的width和height。React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。(dp)

        <View style=width: 50, height: 50, backgroundColor: 'powderblue' />

弹性宽高（Flex）

在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。

组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。

此时子控件除非强制制定width height 才能显示

// 试试去掉父View中的`flex: 1`。
      // 则父View不再具有尺寸，因此子组件也无法再撑开。
      // 然后再用`height: 300`来代替父View的`flex: 1`试试看？
      <View style=flex: 1>
        <View style=flex: 1, backgroundColor: 'powderblue' />
        <View style=flex: 2, backgroundColor: 'skyblue' />
        <View style=flex: 3, backgroundColor: 'steelblue' />
      </View>

七使用Flexbox布局

flexDirection(方向) justifyContent（主轴分布方式） alignItems（次轴分布方式)
使用flexbox规则来指定某个组件的子元素的布局。

一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。译

React Native中的Flexbox的工作原理和web上的CSS基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，而flex也只能指定一个数字值。

Flex Direction

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。

// 尝试把`flexDirection`改为`column`看看
      <View style=flex: 1, flexDirection: 'row'>
        <View style=width: 50, height: 50, backgroundColor: 'powderblue' />
        <View style=width: 50, height: 50, backgroundColor: 'skyblue' />
        <View style=width: 50, height: 50, backgroundColor: 'steelblue' />
      </View>

Justify Content(主轴)

在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between。

和Android新出的ConstraintLayout很相似是不是，因为ConstraintLayout就是模仿flexible 布局的产物

/ 尝试把`justifyContent`改为`center`看看
      // 尝试把`flexDirection`改为`row`看看
      <View style=
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      >
        <View style=width: 50, height: 50, backgroundColor: 'powderblue' />
        <View style=width: 50, height: 50, backgroundColor: 'skyblue' />
        <View style=width: 50, height: 50, backgroundColor: 'steelblue' />
      </View>

Align Items（次轴）

在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。

可参考[布局样式属性]:http://reactnative.cn/docs/0.44/layout-props.html

八处理文本输入

TextInput是一个允许用户输入文本的基础组件。
它有一个名为onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。
另外还有一个名为onSubmitEditing的属性，会在文本被提交后（用户按下软键盘上的提交键）调用。

“`
class PizzaTranslator extends Component
constructor(props)
super(props);
this.state = text: ”;

render()
return (

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

...ls/80520331 Ok,话不多说，Let'scodinghelloWorld吧。1.创建reactnative项目，命名为FirstReactNative命令：react-nativeinitFirstReactNative 2.利用Androidstudio打开已经创建的FirstReactNative项目，找到项目下的Android路径打开即可。Tipsÿ... 查看详情

我的android进阶之旅androidstudio中使用git提交代码报错：can‘tcommitchangesfrommultiplechangelistsatonce(代码片(代码片段)

一、错误描述今天在AndroidStudio中，Commit代码的时候报错了，然后解决了。现在模拟复现下之前的错误，如下所示：0filecommitted,2filesfailedtocommit:1、测试多个changelist提交Can\'tcommitchangesfrommultiplechangelistsatonce报错截图为：二、分析错... 查看详情

reactnative入门认识flexbox布局(代码片段)

...W3C在09年提出的在Web端取代CSS盒子模型的一种布局方式。ReactNative实现了Flexbox布局的大部分功能。 Flexbox布局所使用的属性，基本可以分为两大类：决定子组件排列规则的属性，例如：flexDirection,flexWrap,justifyContent,alignItems等。... 查看详情

reactnative入门基础知识总结(代码片段)

中秋在家闲得无事，想着做点啥，后来想想，为啥不学学reactnative。在学习 ReactNative时，需要对前端（HTML，CSS，JavaScript）知识有所了解。对于JS，可以看看阮一峰老师的《ECMAScript6入门》这篇文章。里面涉及很多ES6的新特性... 查看详情

reactnative入门代码结构

一、了解index.ios.js大家都清楚，React-Native就是在开发效率和用户体验间做的一种权衡。React-native是使用JS开发，开发效率高、发布能力强，不仅拥有hybrid的开发效率，同时拥有nativeapp相媲美的用户体验。目前天猫也在这块开始试... 查看详情

reactnative基础&入门教程：调试reactnative应用的一小步

ReactNative(以下简称RN)为传统前端开发者打开了一扇新的大门。其中，使用浏览器的调试工具去Debug移动端的代码，无疑是最吸引开发人员的特性之一。试想一下，当你在手机屏幕按下一个按钮，处理事件的代码就可以立即在... 查看详情

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

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

unityshader入门精要学习笔记-第5章开始unityshader学习之旅

一个顶点/片元着色器的结构大概如下: Shader"MyShaderName"{Properties{//属性}SubShader{//针对显卡A的SubShaderPass{//设置渲染状态和标签//开始CG代码片段CGPROGRAM//该代码的预编译指令，例如：#pragmavertexvert#pragmafragmentfrag//CG代码写在这儿EN... 查看详情

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

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

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

《reactnative入门与实战》读书笔记

ReactNative介绍　　它的底层引擎是JavaScriptCore，调用的是原生组件而非HTML5组件（HTML+CSS+JavaScript构建的组件）。运行时，可以做到与NativeApp媲美的体验，同时因为JavaScript代码可以使用后端强大的Web方式管理，既可以做到高效开发... 查看详情

f#之旅7-图片处理入门

首先，隆重介绍今天的主角：ImageFactory（http://imageprocessor.org/）。虽然我并没有在实际工作中用到这个库，但是它干净利索的使用方式打动了我，很久以前就存了下来。这个库的开发语言是C#，nuget有下载，提供了一系列可以链式... 查看详情

reactnative入门——入门小结(代码片段)

1.js跳转Activity后，按home键再切回应用白屏：解决方案：修改MainActivity或目标Activity启动方式，总之不能全部为SingleTask。2.代码报错修改后无法链接nodejs服务了？解决方案：尝试在nodejs服务框内按Ctrl+V。3.... 查看详情

reactnative入门——入门小结(代码片段)

reactnative入门基础(代码片段)

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

一条数据的hbase之旅，简明hbase入门教程-write全流程(代码片段)

如果将上篇内容理解为一个冗长的"铺垫"，那么，从本文开始，剧情才开始正式展开。本文基于提供的样例数据，介绍了写数据的接口，RowKey定义，数据在客户端的组装，数据路由，打包分发，以及RegionServer侧将数据写入到Region... 查看详情

前端之旅nginx快速入门

一名软件工程专业学生的前端之旅，记录自己对三件套（HTML、CSS、JavaScript）、Jquery、Ajax、Axios、Bootstrap、Node.js、Vue、小程序开发（Uniapp）以及各种UI组件库、前端框架的学习。【前端之旅】Web基础与开发工具【前端之旅】手把... 查看详情

正文

match的reactnative入门之旅(代码片段)

一 搭建开发环境

三 State（状态）

五 样式

六 高度与宽度

指定宽高

弹性宽高（Flex）

七 使用Flexbox布局

Flex Direction

Justify Content(主轴)

Align Items（次轴）

八 处理文本输入

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

我的android进阶之旅androidstudio中使用git提交代码报错：can‘tcommitchangesfrommultiplechangelistsatonce(代码片(代码片段)

reactnative入门认识flexbox布局(代码片段)

reactnative入门基础知识总结(代码片段)

reactnative入门代码结构

reactnative基础&入门教程：调试reactnative应用的一小步

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

unityshader入门精要学习笔记-第5章开始unityshader学习之旅

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

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

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

《reactnative入门与实战》读书笔记

f#之旅7-图片处理入门

reactnative入门——入门小结(代码片段)

reactnative入门——入门小结(代码片段)

reactnative入门基础(代码片段)

一条数据的hbase之旅，简明hbase入门教程-write全流程(代码片段)

前端之旅nginx快速入门

一搭建开发环境

五样式

六高度与宽度

七使用Flexbox布局

八处理文本输入