内容简介：最后记得将这个styles变量导出, 语法就是然后我们需要在App.js文件中导入这个样式app文件夹和App.js文件在同一层级目录, 所以用
我们创建的应用不可能把所有的东西都放在一个文件里面, 我们可以按照自己的想法去组织一下应用的代码.
首先我们想办法把样式分离出来, 放到另一个文件当中.
在根目录下建立一个文件夹app, 然后在app文件夹下建立一个Styles文件夹, 在Styles文件夹中建立一个叫做Main.js的js文件
然后将App.js中styles相关的代码剪切进来, 然后需要注意的是用到了 StyleSheet.create 这句代码所以StyleSheet这个包是也是需要导进来的, 所以Main.js的完整代码如下
import {StyleSheet} from 'react-native';
let styles = StyleSheet.create({
redText: {
color: '#db2828',
fontSize: 15,
},
itemMeta: {
fontSize: 16,
color: 'rgba(0, 0, 0, 0.6)',
marginBottom: 6,
},
itemHeader: {
fontSize: 18,
fontFamily: 'Helvetica Neue',
fontWeight: '300',
color: '#6435c9',
marginBottom: 6,
},
itemContent: {
flex: 1, // 大概就是weight的意思吧, 占剩下面积的100%, 否则flex就是stretch, 会把里面的text组件的宽度伸展开来,
// 一行中的文字太多的话会跑到外面去, 可以将这个flex: 1注释掉看一下效果就知道了
marginLeft: 13,
marginTop: 6,
},
item: {
flexDirection: 'row',
borderBottomWidth: 1,
borderColor: 'rgba(100, 53, 201, 0.1)',
paddingBottom: 6,
marginBottom: 6,
flex: 1, // todo 这里的flex等于1到底有什么用
},
loading: {
flex: 1, // todo 这里的flex等于1到底有什么用
justifyContent: 'center',
alignItems: 'center',
},
overlay: {
backgroundColor: 'rgba(0, 0, 0, 0.1)',
alignItems: 'center',
},
overlayHeader: {
fontSize: 33,
fontFamily: 'Helvetica Neue',
fontWeight: '200',
color: '#eae7ff',
padding: 10,
},
overlaySubHeader: {
fontSize: 16,
fontFamily: 'Helvetica Neue',
fontWeight: '200',
color: '#eae7ff',
padding: 10,
paddingTop: 0,
},
backgroundImage: {
flex: 1,
resizeMode: 'cover', // contain, stretch(拉伸)
},
image: {
width: 99,
height: 138,
margin: 6,
},
itemOne: {
alignSelf: 'stretch', // stretch: 伸展、张开
},
itemTwo: {
alignSelf: 'flex-end',
},
itemThree: {
// alignSelf: 'flex-end',
// flex: 2,
},
itemText: {
fontSize: 33,
fontFamily: 'Helvetica Neue',
fontWeight: '200',
color: '#6435c9',
padding: 30,
},
container: {
// justifyContent: 'space- around',
// alignItems: 'flex-start',
flexDirection: 'row',
backgroundColor: '#eae7ff',
flex: 1, // 占满全屏
paddingTop: 23,
}
});
export {styles as default}; // 注意这里的styles是上面的let styles
最后记得将这个styles变量导出, 语法就是 export { xxx as default} , 这个xxx就是在文件中定义的变量styles
然后我们需要在App.js文件中导入这个样式
import styles from './app/Styles/Main';
app文件夹和App.js文件在同一层级目录, 所以用 ./app/xxx/ , 然后再一层层去引用到Main.js文件, ./ 表示当前文件所在的目录, 而 ../ 就表示当前文件的上级目录
运行效果
成功的跑了起来, 样式也是对的, 说明代码重构成功!
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
豆瓣，流行的秘密
黄修源 / 机械工业出版社 / 2009-9 / 29.00
380万人为何会齐聚豆瓣？ HIN1和SARS是如何传播扩散开的？ 贾君鹏何以快速窜红网络？ 通过创新扩散的理论的分析和说明，给出了所有这些问题的答案！ 这本书从豆瓣的流行现象说开来，应用了创新扩散等传播学道理来解释了豆瓣如何流行起来，同时作者还同时用创新扩散的理论解释了为何会出现世界变平的现象，长尾理论，SARS病毒的高速传播等。 作者以前任豆瓣设计师的身份以自己亲......一起来看看 《豆瓣，流行的秘密》 这本书的介绍吧!
