2016.10.17
新建文件
react-native init Helloworld
打开Helloworld.xcodeproj文件
在编辑器打开index.ios.js
编辑这个文件里的代码并保存,点击模拟器,command+r刷新模拟器
使用的单引号为英文状态下
如果报错直接复制代码中原来就有的符号
justifyContent: 'center', //竖直方向的居中
alignItems: 'center', //水平方向的居中
关于插入图片
import {
AppRegistry,
StyleSheet,
Text,
Image,//添上Image
View,
} from 'react-native';
<Image style={styles.pic} source={{uri:'https:xxx.xxx.com/xxx?xxx=xx...'}}>
Image标签的source的第一个大括号是模板,第二个大括号是js对象,js对象里面有个key是uri,表示图片的地址
注意 第一个是style,第二个是styles,花括号里的是uri,不是url
关于CSS和UI
style是组件的一个自有属性,第一个{}JS执行环境或者说是模板,第二个{}只是css样式对象的括号而已
给view设置多个style的时候,注意加中括号‘[ ]’,如果不加会报错
alignSelf:对齐方式
center: {
alignSelf:'center',//居中
},
left: {
alignSelf:'flex-start',//居左
},
right: {
alignSelf:'flex-end',//居右
},
auto 自动、 stretch 可延伸的
alignItems是alignSelf的变种,跟alignSelf的功能类似,可用于水平居中;justifyContent用于垂直居中,属性较多,