脚本宝典收集整理的这篇文章主要介绍了React Native 流水账,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
流水账的重点在于简单介绍下React-Native(iOS)的根基文件 -> index.ios.js
React基础
VAR {
ApPRegistry,
StyleSheet,
Text,
View,
} = React;
以上是应用中会用到的“组件列表”,既然是组件(component)那自然带了组件的特性:
模块化
复用性
可组合嵌套
其他常用的组件还有image
、TextInput
、ListView
。
render函数
var AwesomeProject = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
});
整个render函数的作用就是创建一个AwesomeProject
的组件(集)视图(是View与Text的组合)。
样式
组件自然有样式属性,这个属性的阐述通过styles列表来阐述:
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5fcFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
这里引入了flexbox的排版理念的属性flex,可以主要研究下~~
注册组件
应用开启需要声明第一个组件的名字:
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
以上是脚本宝典为你收集整理的React Native 流水账全部内容,希望文章能够帮你解决React Native 流水账所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。