react-native 学习四 入门基础

react-native：
React Native 看起来很像 React，只不过其基础组件是原生组件而非 web 组件。要理解 React Native 应用的基本结构，首先需要了解一些基本的 React 的概念，比如 JSX 语法、组件、state状态以及props属性。如果你已经了解了 React，那么还需要掌握一些 React Native 特有的知识，比如原生组件的使用。这篇教程可以供任何基础的读者学习，不管你是否有 React 方面的经验

ES2015 （也叫作 ES6）

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）

请注意{pic}外围有一层括号，我们需要用括号来把pic这个变量嵌入到 JSX 语句中。括号的意思是括号内部为一个 js 变量或表达式，需要执行后取值。因此我们可以把任意合法的 JavaScript 表达式通过括号嵌入到 JSX 语句中

react-native中：

export default class HelloWorldApp extends Component {
render() {
return (
<View>
// 只能有一个View，不能并列View，当然可以嵌套View
// 可以自定义组件，{} 代表的是变量
</View>
);
}
}

仅仅使用props和基础的Text、Image以及View组件，你就已经足以编写各式各样的 UI 组件了。要学习如何动态修改你的界面，那就需要进一步学习 State（状态）的概念

实际开发中，我们一般不会在定时器函数（setInterval、setTimeout 等）中来操作 state。典型的场景是在接收到服务器返回的新数据，或者在用户输入数据之后。你也可以使用一些“状态容器”比如Redux来统一管理数据流

一切界面变化都是状态state变化
state的修改必须通过setState()方法
this.state.likes = 100; // 这样的直接赋值修改无效！
setState 是一个 merge 合并操作，只修改指定属性，不影响其他属性
setState 是异步操作，修改不会马上生效

样式：

在 React Native 中，你并不需要学习什么特殊的语法来定义样式。我们仍然是使用 JavaScript 来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了 web 上的 CSS 的命名，只是按照 JS 的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。

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

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

const styles=StyleSheet.create({
view:{
alinItems: 'center',
top: 50
},
blue: {
color: 'blue',
fontSize: 30
}
})
return (
<View style={styles.view}>
<Text style={styles.red}>just red</Text>
<Text style={[styles.red, styles.blue]}>just blue</Text>
</View>
);

高度和宽度：

最简单的给组件设定尺寸的方式就是在样式中指定固定的width和height。React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点

这样给组件设置尺寸也是一种常见的模式，比如要求在不同尺寸的屏幕上都显示成一样的大小。不会安装手机的屏幕大小进行灵活变化

弹性（Flex）宽高

在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）

使用Flexbox布局：
我们在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。

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

https://weibo.com/1712131295/CoRnElNkZ?ref=collection&type=comment#_rnd1559458582238

Flex Direction:

flexDirection: 'row-reverse'

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

Justify Content

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

Align Items

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

https://reactnative.cn/docs/layout-props/ 布局属性

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

使用滚动视图

网络：

很多移动应用都需要从远程地址中获取数据或资源。
你可能需要给某个 REST API 发起 POST 请求以提交用户数据，
又或者可能仅仅需要从某个服务器上获取一些静态内容——以下就是你会用到的东西。

发起请求：

要从任意地址获取内容的话，只需要简单地将网址作为参数传递给fetch方法即可（fetch这个词本身也就是获取的意思）
fetch('https://mywebsite.com/mydata.json);

Fetch 还有可选的第二个参数，可以用来定制 HTTP 请求一些参数。你可以指定 header 参数，或是指定使用 POST 方法，又或是提交数据等等：

fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue'
})
});

Fetch教程：
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API