我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。 一般来说，你需要在 constructor 中初始化state（译注：这是 ES6 的写法，早期的很多 ES5 的例子使用的是 getInitialState 方法来初始化 state，这一做法会逐渐被淘汰），然后在需要修改时调用setState方法。 假如我们需要制作一段不停闪烁的文字。文字内容本身在组件创建时就已经指定好了，所以文字内容应该是一个prop。而文字的显示或隐藏的状态（快速的显隐切换就产生了闪烁的效果）则是随着时间变化的，因此这一状态应该写到state中。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
import React, { Component } from 'react'; import { Text, View } from 'react-native'; class Blink extends Component { constructor(props) { super(props); this.state = { isShowingText: true }; // 每1000毫秒对showText状态做一次取反操作 setInterval(() => { this.setState(previousState => { return { isShowingText: !previousState.isShowingText }; }); }, 1000); } render() { // 根据当前showText的值决定是否显示text内容 if (!this.state.isShowingText) { return null; } return ( <Text>{this.props.text}</Text> ); } } export default class BlinkApp extends Component { render() { return ( <View> <Blink text='I love to blink' /> <Blink text='Yes blinking is so great' /> <Blink text='Why did they ever take this out of HTML' /> <Blink text='Look at me look at me look at me' /> </View> ); } } |
实际开发中，我们一般不会在定时器函数（setInterval、setTimeout 等）中来操作 state。典型的场景是在接收到服务器返回的新数据，或者在用户输入数据之后。你也可以使用一些“状态容器”比如Redux来统一管理数据流。 每次调用setState时，BlinkApp 都会重新执行 render 方法重新渲染。这里我们使用定时器来不停调用setState，于是组件就会随着时间变化不停地重新渲染。 State 的工作原理和 React.js 完全一致，所以对于处理 state 的一些更深入的细节，你可以参阅React.Component API。 译注：提示一些初学者应该牢记的要点： 一切界面变化都是状态state变化 state的修改必须通过setState()方法 this.state.likes = 100; // 这样的直接赋值修改无效！ setState 是一个 merge 合并操作，只修改指定属性，不影响其他属性 setState 是异步操作，修改不会马上生效 看到这里，你可能觉得我们的例子总是千篇一律的黑色文本，太特么无聊了。那么我们一起来学习一下样式吧。 from:https://reactnative.cn/docs/state/
View Details大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。 以常见的基础组件Image为例，在创建一个图片时，可以传入一个名为source的 prop 来指定要显示的图片的地址，以及使用名为style的 prop 来控制其尺寸。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React, { Component } from 'react'; import { Image } from 'react-native'; export default class Bananas extends Component { render() { let pic = { uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg' }; return ( <Image source={pic} style={{width: 193, height: 110}} /> ); } } |
译注：在 iOS 上使用 http 链接的图片地址可能不会显示，参见这篇说明修改。从 Android9 开始，也会默认阻止 http 请求，请参考相关配置 请注意{pic}外围有一层括号，我们需要用括号来把pic这个变量嵌入到 JSX 语句中。括号的意思是括号内部为一个 js 变量或表达式，需要执行后取值。因此我们可以把任意合法的 JavaScript 表达式通过括号嵌入到 JSX 语句中。 自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制，可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props，然后按需处理即可。下面是一个例子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
class Greeting extends Component { render() { return ( <View style={{alignItems: 'center'}}> <Text>Hello {this.props.name}!</Text> </View> ); } } export default class LotsOfGreetings extends Component { render() { return ( <View style={{alignItems: 'center'}}> <Greeting name='Rexxar' /> <Greeting name='Jaina' /> <Greeting name='Valeera' /> </View> ); } } |
我们在Greeting组件中将name作为一个属性来定制，这样可以复用这一组件来制作各种不同的“问候语”。上面的例子把Greeting组件写在 JSX 语句中，用法和内置组件并无二致——这正是 React 体系的魅力所在——如果你想搭建一套自己的基础 UI 框架，那就放手做吧！ 上面的例子出现了一样新的名为View的组件。View 常用作其他组件的容器，来帮助控制布局和样式。 仅仅使用props和基础的Text、Image以及View组件，你就已经足以编写各式各样的 UI 组件了。要学习如何动态修改你的界面，那就需要进一步学习 State（状态）的概念。 from:https://reactnative.cn/docs/props/
View Details今天升级Xcode 7.0 bata发现网络访问失败。 输出错误信息
|
1 |
The resource could not be loaded because the App Transport Security policy requires the use of a secure connection. |
Google后查证，iOS9引入了新特性App Transport Security (ATS)。详情：App Transport Security (ATS) 新特性要求App内访问的网络必须使用HTTPS协议。 但是现在公司的项目使用的是HTTP协议，使用私有加密方式保证数据安全。现在也不能马上改成HTTPS协议传输。 最终找到以下解决办法： 在Info.plist中添加NSAppTransportSecurity类型Dictionary。 在NSAppTransportSecurity下添加NSAllowsArbitraryLoads类型Boolean,值设为YES 看到很多同学修改后还是不能用添加一下截图： 在Filter中搜索Info.plist，选择Info.plist进行编辑 按照上面提到的方式添加信息，正确的修改会看到下图这个样子，注意类型NSAppTransportSecurity为Dictionary，NSAllowsArbitraryLoads为Boolean，复制粘贴的时候，不要多了空格，segment fault 页面上直接复制，经常会多一个出空格！ 注意⚠️，单元测试下面也有一个Info.plist，修改那个文件是没有作用的！ 补充说明 上面介绍的方法虽然解决了网络访问的问题，但是苹果提供的安全保障也被关闭了。 不过，按照国内的现状，关闭这个限制也许是更实际的做法。 至于原因就太多了，第三方SDK（几乎都是访问HTTP），合作伙伴接入（不能要求它们一定要支持HTTPS）。 如果你的App没有受到这些原因的限制，还是更建议你增加HTTPS支持，而不是关闭限制。 请大家根据项目的实际情况作调整。 出于安全考虑我们提倡使用HTTPS，退而求其次，优先考虑使用例外：将允许访问的域加入到配置列表中 @banxi1988 补充了配置的方法 对于实在不支持HTTPS的应该首先考虑添加例外 添加例外的方式也很简单： 左键Info.plist选择open with source code 然后添加类似如下的配置:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<key>NSAppTransportSecurity</key> <dict> <key>NSExceptionDomains</key> <dict> <key>qq.com</key> <dict> <key>NSIncludesSubdomains</key> <true/> </dict> <key>sina.com.cn</key> <dict> <key>NSIncludesSubdomains</key> <true/> </dict> </dict> </dict> |
根据自己需要的域名修改， NSIncludeSubdomains 顾名思义是包括子域的意思。 参考： App Transport Security support aka apps on iOS 9 don’t work #4560 711_networking_with_nsurlsession.pdf 总结： 苹果正在加大应用安全的管控，这个举措可以看出苹果对信息安全的重视，也暴露出大部分应用传输数据时都是未经过加密的，或使用私有方式加密，以至于苹果开始对开发者提出要求。 私有加密虽然一定程度上是安全的，但是终究不是一个长久之计。全世界这么多安全专家在维护HTTPS安全，早日使用HTTPS确保信息安全才是王道！也省去了私有加密协议的安全隐患！ from:https://segmentfault.com/a/1190000002933776
View Details