内容简介：最后记得将这个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文件, ./ 表示当前文件所在的目录, 而 ../ 就表示当前文件的上级目录
运行效果
成功的跑了起来, 样式也是对的, 说明代码重构成功!
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
