关于react native遇到的问题

2017-11-28  本文已影响15人  夏天爱西瓜汁

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用于垂直居中,属性较多,

上一篇 下一篇

猜你喜欢

热点阅读