组织应用的样式

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

你创建的应用不可能把所有的东西都放到一个文件里,我们可以按自己的想法去组织应用的代码,比如可以按代码的功能,单独放到各自的文件里,然后可以在其它地方导入这些文件里的代码提供的功能。

比如我们可以先把应用需要的样式分离出来 .. 在项目的根目录下面,创建一个新的目录 .. 名字可以随便起 .. 比如叫它 app … 在这个目录的下面,再给样式单独创建一个目录 .. 名字是 Styles ..

在这个目录的下面,你可以去创建一些样式文件 .. 你可以根据样式的功能,把不同的样式放在不同的文件里 .. 这里我们先把所有的样式都放到一个叫 Main.js 的文件里 .. 创建一个这样的文件 .. .

然后回到 index.ios.js .. 把在这里定义的样式剪切一下 .. 回到 Main.js .. 粘贴过来 .. 这里需要用到 StyleSheet ,所以我们要去把 React Native 导入进来 .. import React from 'react-native’ .. 再把 StyleSheet 从 React 里面提取出来 …

import React from 'react-native';

let {
StyleSheet,
} = React;

在这个文件里,我们要导出它提供的东西 ..

在文件的底部 .. 用一个 export .. 一组大括号 .. styles as default … 意思是把 styles 作为默认的东西导出来 ..

这里要导出的这个 styles .. 就是上面的这个 styles 变量 …

保存一下 ..

再回到 index.ios.js .. 比如我想在这个文件里使用 app,Styles 目录下的 Main.js 提供的样式 .. 在文件头部 .. 用一个 import .. 起个名字 .. styles .. from .. 当前目录下的 app 下面的 Styles 里的 Main 这个文件 ..

这个 Main 就是刚才我们创建的,在 app ,Styles 下面的这个 Main.js ..

import styles from './app/Styles/Main';

保存 .. 应用仍然可以正常的显示 ..

组织应用的样式《 React Native #2 导航 》

统计

13799
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点