市场合作，请您联系：
品牌广告合作，请您联系：
企业创新合作，请您联系：
地方合作，请您联系：
满足以下场景，获得更高通过率：
新融资求报道
新公司求报道
新产品求报道
创投新闻爆料
为你推送和解读最前沿、最有料的科技创投资讯
聚集15家顶级投资机构的专业互联网融资平台
聚集全球最优秀的创业者，项目融资率接近97%，领跑行业React Native 学习之Text组件
* @Author: fantasy
* @Date: & T15:52:24+08:00
* @Last modified by: & fantasy
* @Last modified time: T17:31:12+08:00
import React, {Component} from 'react'
& Dimensions,
} from 'react-native';
var {width:ScreenW, height:ScreenH} = Dimensions.get('window');
export default class TestImageView ponent{
& _textOnLayout(param){
& & console.log(param);
& & //打印结果为：{ y: 308.5, x: 0, width: 375, height: 50.5 }
& _textOnPress(param){
& & console.log(param);
& render(){
& & var testID = 'myLearnText';
& & return(
& & & &View style={{flex:1}}&
& & & & &View style={{height:ScreenH/2,justifyContent:'center'}}&
& & & & & &&Text&{'writingDirection是ltr的样式'}&/Text&
& & & & &/View&
& & & & &Text & style={{width:ScreenW,fontSize:17,fontStyle:'italic',fontWeight:'100',letterSpacing:1,lineHeight:15}}
& & & & & & & & numberOfLines = {3}
& & & & & & & & testID ={testID}
& & & & & & & & onLayout={(e)=&{this._textOnLayout(e.nativeEvent.layout)}}
& & & & & & & & onPress ={()=&{this._textOnPress(testID)}}
& & & & & & & & suppressHighlighting ={true}
& & & & & & & & allowFontScaling={false}&
& & & & &{'当火车开入这座陌生的城市,那是从来就没有见过的霓虹,我打开离别时你送我的信件,忽然感到无比的思念,看不见雪的冬天不夜的城市,我听见有人欢呼有人在哭泣,早习惯穿梭冲满诱惑的黑夜,但却无法忘记你的脸,有没有人曾告诉你我很爱你,有没有人曾在你日记里哭泣,有没有人曾告诉你我很在意,在意这座城市的距离'}
& & & & &/Text&
& & & & &Text & style={{width:ScreenW,marginTop:100,fontSize:17,fontStyle:'normal',fontWeight:'100',lineHeight:25,textAlign:'justify',textAlignVertical:'center',textDecorationColor:'red',textDecorationStyle:'dotted',textDecorationLine:'underline',writingDirection:'ltr'}}
& & & & & & & & numberOfLines = {3}
& & & & & & & & testID ={testID}
& & & & & & & & onLayout={(e)=&{this._textOnLayout(e.nativeEvent.layout)}}
& & & & & & & & onPress ={()=&{this._textOnPress(testID)}}
& & & & & & & & allowFontScaling={false}&
& & & & &{'当火车开入这座陌生的城市,那是从来就没有见过的霓虹.'}
& & & & &/Text&
& & & &/View&
numberOfLines: 和iOS的UILabel的numberOfLine是一个意思，就是说文字适应组件的宽度的时候，如果文字宽度比组件宽度大，用这个属性来决定Text的行数
onLayout:当这个Text组件布局发生变化的时候，调用这个方法。
onPress: 当这个Text组件被点击以后，会调用这个函数。
testID: 官方解释说是‘用来在端到端测试中标记这个视图’，两个Text组件可以是一个textID，不会报错。
suppressHighlighting:默认为false，在默认情况下按下这个Text会有一个灰色的，椭圆形的高光。当为true时，Text被按下，则没有任何视觉效果。
style:是对这个Text组件的一个装饰，除了View组件的一个style之外，它还有自己的一些特有的属性。
& & & color:文字的颜色，和iOS的TextColor一样，
& & & fontFamily:字体的类型，比如word文档中的宋体楷体之类的，
& & & fontSize:字体的大小
& & & fontStyle:斜体和正常
& & & letterSpacing:字与字之间的间隙，
& & & lineHeight:每一行的高度,当行高大于字体的时候，字体会在组件的下面，行高20，字体是17的例子
& & & textAlign:是左对齐 和右对齐。justify只支持iOS
& & & textAlignVertical:只支持安卓 &
& & & textDecorationLine:这三个属性基本上是套在一起的，没有这个属性，其他两个属性设置了，也没用
& & & textDecorationStyle:
& & & textDecorationColor:
& & & writingDirection:这个属性是决定第二行是从左还是从右开始
我学习React Native的github是 /wkffantasy/learningReact_native 欢迎大家来指正错误，共同学习
以下图片是其他属性的一些对比
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？{"debug":false,"apiRoot":"","paySDK":"/api/js","wechatConfigAPI":"/api/wechat/jssdkconfig","name":"production","instance":"column","tokens":{"X-XSRF-TOKEN":null,"X-UDID":null,"Authorization":"oauth c3cef7c66aa9e6a1e3160e20"}}
{"database":{"Post":{"":{"contributes":[{"sourceColumn":{"lastUpdated":,"description":"写自己认为有趣的东西","permission":"COLUMN_PUBLIC","memberId":2442840,"contributePermission":"COLUMN_PUBLIC","translatedCommentPermission":"all","canManage":true,"intro":"偶尔干货，偶尔鸡汤，偶尔发骚","urlToken":"fyales","id":7086,"imagePath":"fcecadfb4ea.jpeg","slug":"fyales","applyReason":"","name":"扯谈的地方","title":"扯谈的地方","url":"/fyales","commentPermission":"COLUMN_ALL_CAN_COMMENT","canPost":true,"created":,"state":"COLUMN_NORMAL","followers":40,"avatar":{"id":"fcecadfb4ea","template":"/{id}_{size}.jpeg"},"activateAuthorRequested":false,"following":false,"imageUrl":"/fcecadfb4ea_l.jpeg","articlesCount":16},"state":"accepted","targetPost":{"titleImage":"","lastUpdated":,"imagePath":"","permission":"ARTICLE_PUBLIC","topics":[592,17686],"summary":"前面我们写了和。今天我们谈谈React Native中的触摸事件。基本的Touch稍微有一点Android基础的人都知道，Android的触摸操作都是绑定在对应的空间上的，我们可以利用view.setOnClickListener,view.setOn…","copyPermission":"ARTICLE_COPYABLE","translatedCommentPermission":"all","likes":0,"origAuthorId":0,"publishedTime":"T22:32:20+08:00","sourceUrl":"","urlToken":,"id":717891,"withContent":false,"slug":,"bigTitleImage":false,"title":"React Native---手势响应系统","url":"/p/","commentPermission":"ARTICLE_ALL_CAN_COMMENT","snapshotUrl":"","created":,"comments":0,"columnId":7086,"content":"","parentId":0,"state":"ARTICLE_PUBLISHED","imageUrl":"","author":{"bio":"谦谦君子，温润如玉","isFollowing":false,"hash":"7f9ebfc0580","uid":60,"isOrg":false,"slug":"fyales","isFollowed":false,"description":"了解世界的真相","name":"鲫鱼豆腐汤","profileUrl":"/people/fyales","avatar":{"id":"v2-0bb73c4adf35b5c9433e","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},"memberId":2442840,"excerptTitle":"","voteType":"ARTICLE_VOTE_CLEAR"},"id":376781}],"title":"React Native---手势响应系统","author":"fyales","content":"前面我们写了和。今天我们谈谈React Native中的触摸事件。基本的Touch稍微有一点Android基础的人都知道，Android的触摸操作都是绑定在对应的空间上的，我们可以利用view.setOnClickListener,view.setOnTouchListener等方法响应触摸事件。Web上和Android类似，也是通过在相应的组件上添加onClick方法,addEventListener方法响应事件。React Native略有不同，它提供了一个Touchable实现,用它作为触控的组件。这就意味着你要在需要响应的View中添加一个Touch的外套才能实现原生所需要的功能。下面看代码:_onPressIn() {\n
console.log(\"press in\");\n}\n\n_onPressOut() {\n
console.log(\"press out\");\n}\n\n_onPress() {\n
console.log(\"press\");\n}\n\n_onLonePress() {\n
console.log(\"long press\");\n}\n\n\nrender() {\n
return (\n
&View style = {styles.container} &\n
&TouchableHighlight\n
style = {styles.touchable}\n
onPressIn = {this._onPressIn}\n
onPressOut = {this._onPressOut}\n
onPress = {this._onPress}\n
onLongPress = {this._onLonePress} &\n
&View style = {styles.button} &\n
&/TouchableHighlight&\n
);\n}\n在这里我们可以很明显的看到我们在需要实现点击效果的view外面加了TouchableHightLight组件，并在这个组件里面实现了各种触摸事件。这里的TouchalbeHightLight是Touch的具体实现之一，除了TouchableHightLight，还有其他三个组件同样实现了Touch的功能，它们的主要功能如下:TouchableHightLight本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低，同时会有一个底层的颜色透过而被用户看到，使得视图变暗或变亮。在底层实现上，实际会创建一个新的视图到视图层级中，如果使用的方法不正确，有时候会导致一些不希望出现的视觉效果。譬如没有给视图的backgroundColor显式声明一个不透明的颜色。TouchableNativeFeedback(仅限Android)本组件用于封装视图，使其可以正确响应触摸操作（仅限Android平台）。在Android设备上，这个组件利用原生状态来渲染触摸的反馈。目前它只支持一个单独的View实例作为子节点。个人感觉这个是为了实现Material Design而出的组件，因为用这个组件可以实现Material Design点击控件时产生的涟漪效果，具体请参考TouchableOpacity本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低。这个过程并不会真正改变视图层级，大部分情况下很容易添加到应用中而不会带来一些奇怪的副作用。（此组件与TouchableHighlight的区别在于并没有额外的颜色变化，更适于一般场景）TouchableWithoutFeedback本组件用来封装视图。但除非你有一个很好的理由，否则不要用这个组件。所有能够响应触屏操作的元素在触屏后都应该有一个视觉上的反馈（然而本组件没有任何视觉反馈）。这也是为什么一个\"web\"应用总是显得不够\"原生\"的主要原因之一。响应如上所述，一般的组件需要与Touchable组件配合才能完整的视线触摸的操作，但是触摸之后产生的响应事件还是定义在对应的View中的。正常的响应事件流程应该是这样的:是否接受相应-&响应触摸事件-&释放触摸事件\n与流程相对应的方法是:View.props.onStartShouldSetResponder: (evt) =& true: 在用户开始触摸的时候（手指刚刚接触屏幕的瞬间），是否愿意成为响应者？View.props.onMoveShouldSetResponder: (evt) =& true:如果View不是响应者，那么在每一个触摸点开始移动（没有停下也没有离开屏幕）时再询问一次：是否愿意响应触摸交互呢？如果View返回true，并开始尝试成为响应者，那么会触发下列事件之一:View.props.onResponderGrant: (evt) =& {}:View现在要开始响应触摸事件了。这也是需要做高亮的时候，使用户知道他到底点到了哪里。View.props.onResponderReject: (evt) =& {}:响应者现在“另有其人”而且暂时不会“放权”，请另作安排。如果View已经开始响应触摸事件了，那么下列这些处理函数会被一一调用：View.props.onResponderMove: (evt) =& {}:用户正在屏幕上移动手指时（没有停下也没有离开屏幕）。View.props.onResponderRelease: (evt) =& {}:触摸操作结束时触发，比如\"touchUp\"（手指抬起离开屏幕）。View.props.onResponderTerminationRequest: (evt) =& true:有其他组件请求接替响应者，当前的View是否“放权”？返回true的话则释放响应者权力。View.props.onResponderTerminate: (evt) =& {}:响应者权力已经交出。这可能是由于其他View通过onResponderTerminationRequest请求的，也可能是由操作系统强制夺权（比如iOS上的控制中心或是通知中心）。在这里首先要注意的是，响应者只能有一个，举例来说：一个子view和一个父view。如果你希望父view能够响应子view和父view共有区域的事件的话，那么你必须使子view放弃响应，这个时候你就需要设置子view的View.props.onResponderTerminationRequest为true,那么子view就会执行View.props.onResponderTerminate方法，并放弃响应的权利，这个时候父View就可以响应事件了。第二个需要注意的点就是，当两个View重叠的话需要慎用这些属性，因为这有可能会造成意想不到的效果,下面是例子:import React, {\n
Component,\n} from 'react';\n\nimport {\n
AppRegistry,\n
StyleSheet,\n
TouchableHighlight,\n
PanResponder\n} from 'react-native';\n\n\nclass demoReact extends Component {\n
//构造器\n
constructor(props) {\n
//加载父类方法,不可省略\n
super(props);\n
//设置初始的状态\n
this.state = {\n
bg:'white',\n
bg2:'white',\n
//componentDidMount是React组件的一个生命周期方法，他会在组件刚加载完成的时候调用一次，以后不会再调用\n
componentDidMount() {}\n\n
componentWillMount(){\n
this._gestureHandlers = {\n
onStartShouldSetResponder: () =& true,
//对触摸进行响应\n
onMoveShouldSetResponder: ()=& true,
//对滑动进行响应\n
onResponderGrant: ()=&{\n
console.log(\"parent onResponseGrant\");\n
this.setState({bg: 'red'});\n
}, //激活时做的动作\n
onResponderMove: ()=&{\n
console.log(\"parent onResponderMove\");\n
//移动时作出的动作\n
onResponderRelease: ()=&{\n
console.log(\"parent onResponseRelease\");\n
this.setState({bg: 'white'})\n
}, //动作释放后做的动作\n
this._gestureHandlers2 = {\n
onStartShouldSetResponder: () =& true,\n
onMoveShouldSetResponder: ()=& true,\n
onResponderTerminationRequest:() =& true,\n
onResponderGrant: ()=&{\n
console.log(\"child onResponseGrant\");\n
this.setState({bg2: 'green'});\n
onResponderMove: ()=&{\n
console.log(\"child onResponseMove\");\n
onResponderRelease: ()=&{\n
console.log(\"child onResponseRelease\");\n
this.setState({bg2: 'white'});\n
render() {\n
return (\n
&View style={styles.container}&\n
{...this._gestureHandlers}\n
style={[styles.rect,{\n
\"backgroundColor\": this.state.bg\n
{...this._gestureHandlers2}\n
style={[styles.rect2,{\n
\"backgroundColor\": this.state.bg2\n
&/View&\n\n
}\n\n};\n\nvar styles = StyleSheet.create({\n
container: {\n
flex: 1,\n
justifyContent: 'center',\n
alignItems: 'center',\n
backgroundColor: '#F5FCFF',\n
width: 200,\n
height: 200,\n
borderWidth: 1,\n
borderColor: 'black',\n
justifyContent: 'center',\n
alignItems: 'center',\n
rect2: {\n
width: 100,\n
height: 100,\n
borderWidth: 1,\n
borderColor: 'black'\n
width:100,\n
height:100,\n
borderWidth:1,\n
borderColor:'black',\n
backgroundColor:'#223344',\n
alignSelf:'flex-end',\n
}\n});\n\nAppRegistry.registerComponent('demoReact', () =& demoReact);\n观察上面的代码，你认为Console会如何打出日志呢？比如说，父view会不会响应事件？真实的结果是这样的:因为父view虽然不是最初的响应者，但是由于父viewonMoveShouldSetResponder设置为true，并且子view的onResponderTerminationRequest设置为true，这样就会导致响应者由子view变成父view。那么如果我们onResponderTerminationRequest设置为false呢？是不是父view就不会响应时间呢？真实的答案会让你大吃一惊的，结果是这样的:因为父view虽然不是最初的响应者，但是由于父viewonMoveShouldSetResponder设置为true，并且子view的onResponderTerminationRequest设置为true，这样就会导致响应者由子view变成父view。那么如果我们onResponderTerminationRequest设置为false呢？是不是父view就不会响应时间呢？真实的答案会让你大吃一惊的，结果是这样的:看，父view的onResponderGrant的方法仍然被执行到了，这是因为你将父viewonMoveShouldSetResponder设置为true的关系，你可以再看一下此方法的定义，只有当这个值设置为false的时候，父view的onResponderGrant方法才不会执行。所以，当view重叠的时候一定要小心。捕获事件熟悉Android开发的人都知道，View的触摸事件是从ViewGroup往View传播的，即俗称的冒泡形式调用，当我们希望ViewGroup响应时间时，只需要将ViewGroup的onInterceptTouchEvent返回值设置为true就行了,React Native与之类似，只需要将下面的方法设置为true就行了。View.props.onStartShouldSetResponderCapture: (evt) =& trueView.props.onMoveShouldSetResponderCapture: (evt) =& truePanResponder除了上面的responder，React Native还提供了更高级的PanResponder来处理更为复杂的触摸操作，例如多点触摸手势。对于每一个处理函数，它在原生事件之外提供了一个新的gestureState对象。gestureState对象里面的字段可以帮助我们处理更加复杂的触摸情况:stateID:触摸状态的ID。在屏幕上有至少一个触摸点的情况下，这个ID会一直有效。moveX:最近一次移动时的屏幕横坐标moveY:最近一次移动时的屏幕纵坐标x0:当响应器产生时的屏幕坐标y0:当响应器产生时的屏幕坐标dx:从触摸操作开始时的累计横向路程dy:从触摸操作开始时的累计纵向路程vx:当前的横向移动速度vy:当前的纵向移动速度numberActiveTouches:当前在屏幕上的有效触摸点的数量而它的事件处理方法与上面类似，比如上文中的View.props.onStartShouldSetResponder: (evt) =& true它的对应方法就是onStartShouldSetPanResponder: (evt, gestureState) =& true.简单的例子如下:
class demoReact extends Component {\n
//构造器\n
constructor(props) {\n
//加载父类方法,不可省略\n
super(props);\n
//设置初始的状态\n
this.state = {\n
//componentDidMount是React组件的一个生命周期方法，他会在组件刚加载完成的时候调用一次，以后不会再调用\n
componentDidMount() {}\n\n
componentWillMount(){\n
this._panResponder = PanResponder.create({\n
onStartShouldSetPanResponder: () =& true,\n
onMoveShouldSetPanResponder: ()=& true,\n
onPanResponderGrant: ()=&{\n
this._top = this.state.top\n
this._left = this.state.left\n
this.setState({bg: 'red'})\n
onPanResponderMove: (evt,gs)=&{\n
console.log(gs.dx+' '+gs.dy)\n
this.setState({\n
top: this._top+gs.dy,\n
left: this._left+gs.dx\n
onPanResponderRelease: (evt,gs)=&{\n
this.setState({\n
bg: 'white',\n
top: this._top+gs.dy,\n
left: this._left+gs.dx\n
render() {\n
return (\n
&View style={styles.container}&\n
{...this._panResponder.panHandlers}\n
style={[styles.rect,{\n
\"top\":this.state.top,\n
\"left\":this.state.left,\n
var styles = StyleSheet.create({\n
container: {\n
flex: 1,\n
justifyContent: 'center',\n
alignItems: 'center',\n
backgroundColor: '#F5FCFF',\n
width:0,\n
height:0,\n
borderWidth:1,\n
borderColor:'black',\n
backgroundColor:'#223344',\n
alignSelf:'flex-end',\n
});\n最后React Native的触摸事件还是比较复杂的，还有很多值得去探究，今天就写到这里，如有疏漏，还请指出。参考","updated":"T14:32:20.000Z","canComment":false,"commentPermission":"anyone","commentCount":0,"collapsedCount":0,"likeCount":1,"state":"published","isLiked":false,"slug":"","isTitleImageFullScreen":false,"rating":"none","titleImage":"","links":{"comments":"/api/posts//comments"},"reviewers":[],"topics":[{"url":"/topic/","id":"","name":"React"},{"url":"/topic/","id":"","name":"React Native"},{"url":"/topic/","id":"","name":"Android"}],"adminClosedComment":false,"titleImageSize":{"width":0,"height":0},"href":"/api/posts/","excerptTitle":"","column":{"slug":"fyales","name":"扯谈的地方"},"tipjarState":"inactivated","annotationAction":[],"sourceUrl":"","pageCommentsCount":0,"hasPublishingDraft":false,"snapshotUrl":"","publishedTime":"T22:32:20+08:00","url":"/p/","lastestLikers":[{"bio":"it","isFollowing":false,"hash":"c488d886b0ddfbac239feb","uid":636300,"isOrg":false,"slug":"onepiece8971","isFollowed":false,"description":"","name":"看不懂也要点个赞","profileUrl":"/people/onepiece8971","avatar":{"id":"ef846bd03a2f25ab0bfc778ed982015c","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false}],"summary":"前面我们写了和。今天我们谈谈React Native中的触摸事件。基本的Touch稍微有一点Android基础的人都知道，Android的触摸操作都是绑定在对应的空间上的，我们可以利用view.setOnClickListener,view.setOn…","reviewingCommentsCount":0,"meta":{"previous":{"isTitleImageFullScreen":false,"rating":"none","titleImage":"","links":{"comments":"/api/posts//comments"},"topics":[{"url":"/topic/","id":"","name":"React Native"},{"url":"/topic/","id":"","name":"Android"}],"adminClosedComment":false,"href":"/api/posts/","excerptTitle":"","author":{"bio":"谦谦君子，温润如玉","isFollowing":false,"hash":"7f9ebfc0580","uid":60,"isOrg":false,"slug":"fyales","isFollowed":false,"description":"了解世界的真相","name":"鲫鱼豆腐汤","profileUrl":"/people/fyales","avatar":{"id":"v2-0bb73c4adf35b5c9433e","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},"column":{"slug":"fyales","name":"扯谈的地方"},"content":"React Native使你能够利用JavaScript和React来构建原生App。即使你没有IOS或者Android开发经验，你仍然可以编写出一个很棒的App。Learn Once,Write Anywhere，其概念还是十分吸引人的。对那些缺少Native开发(Android,IOS)人员的小公司来说，React Native可以算的上一个很好的解决方案。React Native的好处不仅于此，它还具有实时更新，便于测试等好处。因为React Native的知识点还是很复杂的，一两篇文章根本讲不清，所以自己决定写几篇React Native的文章(主要基于Android)，或者说是笔记，既可以加深自己的理解，同时也可以让更多人的了解React Native.目前完成的文章如下，欢迎大家持续关注，如果有什么疏漏或者错误还请指出:在这里我们只做讲解，如果想要了解如何搭建环境及有关React,React Native具体的细节，请移步下面列出的网站:例子下面是React Native项目的入口文件(Android为index.android.js,IOS为index.ios.js)//表示导入,类似java import\nimport React, {\n
Component,\n} from 'react';\n\n//解构式赋值，表示AppRegistry,Image...存在于react-native中，那么在文件中就可以用Image来代替ReactNative.Image.\nimport {\n
AppRegistry,\n
ListView,\n
StyleSheet,\n
View,\n} from 'react-native';\n\nvar API_KEY = '7waqfqbprs7pajbz28mqf6vz';\nvar API_URL = '/api/public/v1.0/lists/movies/in_theaters.json';\nvar PAGE_SIZE = 25;\nvar PARAMS = '?apikey=' + API_KEY + '&page_limit=' + PAGE_SIZE;\nvar REQUEST_URL = API_URL + PARAMS;\n\nclass demoReact extends Component {\n
//构造器\n
constructor(props) {\n
super(props);\n
this.state = {\n
dataSource: new ListView.DataSource({\n
rowHasChanged: (row1, row2) =& row1 !== row2,\n
loaded: false,\n
//React 生命周期的一个方法，它会在组件刚加载完成之后调用一次，以后不会再调用\n
componentDidMount() {\n
this.fetchData();\n
fetchData() {\n
fetch(REQUEST_URL)\n
.then((response) =& response.json())\n
.then((responseData) =& {\n
this.setState({\n
dataSource: this.state.dataSource.cloneWithRows(responseData.movies),\n
loaded: true,\n
.done();\n
//利用JSX方式渲染UI\n
render() {\n
if (!this.state.loaded) {\n
return this.renderLoadingView();\n
return (\n
&ListView\n
dataSource={this.state.dataSource}\n
renderRow={this.renderMovie}\n
style={styles.listView}\n
renderLoadingView() {\n
return (\n
&View style={styles.container}&\n
Loading movies...\n
renderMovie(movie) {\n
return (\n
&View style={styles.container}&\n
source={{uri: movie.posters.thumbnail}}\n
style={styles.thumbnail}\n
&View style={styles.rightContainer}&\n
&Text style={styles.title}&{movie.title}&/Text&\n
&Text style={styles.year}&{movie.year}&/Text&\n
}\n};\n\n//声明样式，用来构建布局\nconst styles = StyleSheet.create({\n
container: {\n
flex: 1,\n
flexDirection: 'row',\n
justifyContent: 'center',\n
alignItems: 'center',\n
backgroundColor: '#F5FCFF',\n
rightContainer: {\n
flex: 1,\n
title: {\n
fontSize: 20,\n
marginBottom: 8,\n
textAlign: 'center',\n
textAlign: 'center',\n
thumbnail: {\n
width: 53,\n
height: 81,\n
listView: {\n
paddingTop: 20,\n
backgroundColor: '#F5FCFF',\n
},\n});\n\n//将项目注册到原生工程中\nAppRegistry.registerComponent('demoReact', () =& demoReact);\n上面的代码是官网上的官方教程，你需要通过它了解的是:导入项目所需要的文件，如react,react-native继承一个基本组件声明样式渲染UI调用API怎么样，是不是还挺简单的，那么，接下来介绍几个关键的概念:Virtual DOM在看渲染UI的代码的时候，你可以发现它和依赖于浏览器的DOM相似，可又有所不同，可以称它为Virtual DOM.它具有以下几种特点:Virtual DOM本身不依赖于浏览器环境，它可以运行在任何JavaScript的执行环境。每当数据变化时，React会将当前的虚拟数和上一次构建的进行Diff,然后得出DOM的区别，最后将需要变化的部分进行实际的浏览器DOM更新,这样实际上减少了DOM的操作，运行性能得到提高。将管理DOM的操作交给框架来做，这样减少了开发人员维护DOM的工作量，使开发人员只要关心数据即可，提高了工作效率。合并处理事件。举个例子，你将节点内容从A变成B,再将B变成A,那么React会认为什么都没有改变。ComponentReact信奉组件化的开发思路。所谓的Thinking in React，就是要求你以组件化的思路来构建你的应用－－－将你UI中每个功能或者UI进行拆分，封装，从而叨叨复用或者逻辑分离的目的。组件化的开发特点如下:每个组件的UI和逻辑都定义在组件内部,和外部完全通过预先设计好的机制来交互,通过组合的方式来实现复杂的功能。React组件,就是 个简单的状态机器。组件核心包括render方法、props(外部传 入的属性)和states(组件本身的状态)。当组件处于某个状态时,那么就输出这个状态对应的界面。当某个状态发生变化后,React会自动会更新界面。具体可参考Android和IOS的界面设计单向数据流动既然已经有了组件机制去定义界面 ,那么还需要一定的机制来定义组件之间,以及组件和数据模型之间如何通信。为此,Facebook提出了Flux框架用于管理数据流。不同于其它MVC框架的双向数据绑定,Flux提倡的是单向数据流动,即永远只有从模型到视图的数据流动。其他值得注意的点异步执行在Javascript代码和原生平台之间的所有操作都是异步执行的，并且原生模块还可以根据需要创建新的线程。这意味着你可以在主线程解码图片，然后在后台将它保存到磁盘，或者在不阻塞UI的情况下计算文字大小和界面布局等等。所以React Native开发的app天然具备流畅和反应灵敏的优势。Javascript和原生代码之间的通讯是完全可序列化的，这使得我们可以借助Chrome开发者工具去调试应用，而不论应用运行在模拟器还是真机上。样式中实现了Flexbox在React Native你基本上可以使用Web中常见的样式，React Native借鉴了弹性盒模型，具体讲解请看。首先，React Native没有实现css来渲染样式，而是使用JavaScript声明样式，像下面这样:var styles = StyleSheet.create({\n
container: {\n
flexDirection: 'row',
flexWrap:'wrap',\n
justifyContent:'center',\n
alignItems:'center', \n
flex:1, \n
backgroundColor:'#120056',\n
width:75,\n
height:75,\n
color:'#ffffff',\n
backgroundColor:'#234567',\n
margin:10,\n
special:{\n
width:75,\n
height:75,\n
color:'#ffffff',\n
backgroundColor:'#234567',\n
margin:10,\n
alignSelf:'flex-end',\n
},\n});\n然后在这里利用自己定义好的样式 :
&View style={styles.container}&\n
&Text style={styles.item}&\n
&Text style={styles.item}&\n
&Text style={styles.item}&\n
&Text style={styles.special}&\n
&Text style={styles.item}&\n
&/View&\nJavaScript环境React Native内置了Babel JavaScript Compiler.因此你可以使用ES5,ES6,ES7上面最新的语法，而不用担心环境是否支持。另外值得注意一点的就是你可以在React中使用,它是一个让你可以用类似XML的方式写view的JavaScript扩展。原生模块进行交互，创建原生ViewReact Native也可以让你很方便的同Native进行交互，创建原生View。React Native的触摸系统让你有接近原生的触摸体验。","state":"published","sourceUrl":"","pageCommentsCount":0,"canComment":false,"snapshotUrl":"","slug":,"publishedTime":"T16:44:12+08:00","url":"/p/","title":"Native入门","summary":"React Native使你能够利用JavaScript和React来构建原生App。即使你没有IOS或者Android开发经验，你仍然可以编写出一个很棒的App。Learn Once,Write Anywhere，其概念还是十分吸引人的。对那些缺少Native开发(Android,IOS)人员的小公司来说，React Native可…","reviewingCommentsCount":0,"meta":{"previous":null,"next":null},"commentPermission":"anyone","commentsCount":0,"likesCount":0},"next":{"isTitleImageFullScreen":false,"rating":"none","titleImage":"","links":{"comments":"/api/posts//comments"},"topics":[{"url":"/topic/","id":"","name":"历史"},{"url":"/topic/","id":"","name":"近代史"},{"url":"/topic/","id":"","name":"抗日战争"}],"adminClosedComment":false,"href":"/api/posts/","excerptTitle":"","author":{"bio":"谦谦君子，温润如玉","isFollowing":false,"hash":"7f9ebfc0580","uid":60,"isOrg":false,"slug":"fyales","isFollowed":false,"description":"了解世界的真相","name":"鲫鱼豆腐汤","profileUrl":"/people/fyales","avatar":{"id":"v2-0bb73c4adf35b5c9433e","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},"column":{"slug":"fyales","name":"扯谈的地方"},"content":"如果你生活在上海，那么你一定经常去人民广场，只要沿着人民广场东边的西藏中路往北走一会，你就会来到苏州河畔，一过西藏路桥，你就会发现路的左边有一个类似仓库的建筑，它就是四行仓库，标志着淞沪战争结束的四行仓库保卫战就发生在这里。四行仓库是一座位于上海闸北区南部、苏州河北岸、西藏路桥西北角的仓库建筑。目前正门门牌号为光复路1号，它是座钢筋混凝土结构的六层大厦，占地0.3公顷，建筑面积2万平方米，屋宽64米，深54米，高25米。这座仓库创建于1931年，为当时闸北一带最高、最大的一座建筑物。它原是大陆银行和北四行（金城银行、中南银行、大陆银行及盐业银行）联合仓库，即紧靠西藏北路的大陆银行仓库与紧靠现晋元路的北四行仓库两部分组成的，但一般均统称为“四行仓库”。日，淞沪会战爆发，国民政府将自己最精锐的部队投入了这场战役。但由于日军在杭州湾登陆，继而北上，为了防止国军被包围，因此国民革命军被迫撤离上海。但以中校团驸谢晋元为首的第七十二军第八十八师第五二四团第一营为基础的加强营共414人留下来据守四行仓库。但是为了防止日军知道防守四行仓库的人过少，对外一直宣称有八百人。这也是“八百壮士”的由来。同时，为迷惑日军，中国军队在其正式通讯中用“五二四团”代替“第一营”，让日军以为有一个团防守四行仓库。1937年，由于日本尚未对美英宣战，因此苏州河南岸作为当时的公共租界是安全的。同时也因为日本尚不想与英美冲突，因此对于距租界只有一河之隔的四行仓库，日军也不敢贸然用飞机进行轰炸。当时，上海市民都以为国军已经撤离上海，当知道四行仓库仍然有国军镇守的时候，整个上海都沸腾了，大批上海市民在雨中聚集在苏州河南岸，为守军呐喊助威。上海市民向守军捐献十多卡车给养。当时《申报》，《新闻报》，《大公报》，《中央日报》报道如下:闸北我军虽已于昨晨拂晓前大部安全撤退，但此非谓闸北已全无我军踪迹，盖我八十八师一营以上之忠勇将士八百余人，由团长谢晋元营长杨瑞符率领，尚在烈焰笼罩敌军四围中，以其最后一滴血，与最后一颗弹，向敌军索取应付之代价，正演出一幕惊天地泣鬼神可永垂青史而不朽之壮烈剧戏也。\n10月28日夜，当时作为女童子军的杨慧敏冒着生命危险将一面中华民国的国旗送到仓库。29日，上海市民发现四行仓库楼顶升起一面中华民国国旗，据说当时聚集在苏州河对岸的群众达三万人，他们欢呼“中华民国万岁”。随风飘荡的中华民国国旗每次自己沿着苏州河跑步，路过四行仓库，想到当时的情景，仍然会感到热血封腾。由此可见，当时的四行仓库保卫战对中国军民士气有多大的提升。当时从外滩看四行仓库现在的四行仓库，日军主攻方向在北，墙上的密密麻麻的洞是当时的加农炮留下的10月29日，外籍人士向国民政府递交请愿书，要求停止战斗，国民政府表示同意，10月31日－11月1日，剩余的377名战士通过新垃圾桥(今西藏路桥)进入租界，四行仓库保卫战结束。谢晋元率领剩余部队进入租借后。部队马上被缴械，后被软禁四年。日，谢晋元在指挥部队做早操的时候被已经被收买的士兵刺死。而另外一位四行仓库保卫战的主要人物杨慧敏后来跟随部队往后方撤退，受到了宋美龄蒋介石的接见，接着更代表中华民国到美国参加“世界青年自由大会“。但后来因为得罪了戴笠，被安上“共产党”，“日本间谍”的罪名，投入监狱，直到戴笠身亡才得以获释。69年过去了，现在走在苏州河畔，四行仓库旁，已然感觉不到当年战争的残酷，只有仓库上面的弹孔让人能够追忆起当年的战火隆隆。1947年上海市政府将上海北火车站到四行仓库的满洲路改名为晋元路，一直更名至今。历史除了可以增加你的学识这一显而易见的好处之外，其实它还可以教你很多东西。首先是国家强大的重要性。如果当时没有租界，日军就无法集结在闸北从容的发动进攻。这样国民政府就可以沿海死守，虽然失败的可能性仍然很大，但损失绝不会像现在这么大。再者，无数先烈为了自己的理想，奉献出自己的生命，因此，我们也应该对目前的生活抱有感恩之心，更加努力的活着。最后，历史让你有“独立之人格,自由之思想”，无论其他人怎么粉饰，历史的真相永远在那里，永远不会改变。","state":"published","sourceUrl":"","pageCommentsCount":0,"canComment":false,"snapshotUrl":"","slug":,"publishedTime":"T16:41:43+08:00","url":"/p/","title":"记淞沪会战结束之战役－四行仓库保卫战","summary":"如果你生活在上海，那么你一定经常去人民广场，只要沿着人民广场东边的西藏中路往北走一会，你就会来到苏州河畔，一过西藏路桥，你就会发现路的左边有一个类似仓库的建筑，它就是四行仓库，标志着淞沪战争结束的四行仓库保卫战就发生在这里。四行仓库是一座…","reviewingCommentsCount":0,"meta":{"previous":null,"next":null},"commentPermission":"anyone","commentsCount":1,"likesCount":11}},"annotationDetail":null,"commentsCount":0,"likesCount":1,"FULLINFO":true}},"User":{"fyales":{"isFollowed":false,"name":"鲫鱼豆腐汤","headline":"了解世界的真相","avatarUrl":"/v2-0bb73c4adf35b5c9433e_s.jpg","isFollowing":false,"type":"people","slug":"fyales","bio":"谦谦君子，温润如玉","hash":"7f9ebfc0580","uid":60,"isOrg":false,"description":"了解世界的真相","profileUrl":"/people/fyales","avatar":{"id":"v2-0bb73c4adf35b5c9433e","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false,"badge":{"identity":null,"bestAnswerer":null}}},"Comment":{},"favlists":{}},"me":{},"global":{},"columns":{"next":{},"fyales":{"following":false,"canManage":false,"href":"/api/columns/fyales","name":"扯谈的地方","creator":{"slug":"fyales"},"url":"/fyales","slug":"fyales","avatar":{"id":"fcecadfb4ea","template":"/{id}_{size}.jpeg"}}},"columnPosts":{},"columnSettings":{"colomnAuthor":[],"uploadAvatarDetails":"","contributeRequests":[],"contributeRequestsTotalCount":0,"inviteAuthor":""},"postComments":{},"postReviewComments":{"comments":[],"newComments":[],"hasMore":true},"favlistsByUser":{},"favlistRelations":{},"promotions":{},"switches":{"couldAddVideo":false},"draft":{"titleImage":"","titleImageSize":{},"isTitleImageFullScreen":false,"canTitleImageFullScreen":false,"title":"","titleImageUploading":false,"error":"","content":"","draftLoading":false,"globalLoading":false,"pendingVideo":{"resource":null,"error":null}},"drafts":{"draftsList":[],"next":{}},"config":{"userNotBindPhoneTipString":{}},"recommendPosts":{"articleRecommendations":[],"columnRecommendations":[]},"env":{"isAppView":false,"appViewConfig":{"content_padding_top":128,"content_padding_bottom":56,"content_padding_left":16,"content_padding_right":16,"title_font_size":22,"body_font_size":16,"is_dark_theme":false,"can_auto_load_image":true,"app_info":"OS=iOS"},"isApp":false},"sys":{}}