(1)实现NavBar import React, {Component, PropTypes} from 'react'; import { AppRegistry, StyleSheet View, TouchableOpacity, Image, ListView, Dimensions } from 'react-native'; import NavBar return ( //这里left默认没有 <View style={styles.container}> <NavBar
) 源码文件: _navbar.scss 1、主要进行了内部区域的划分,如:head、其他区域;以及导航条位置的定位 2、折叠器实现(在4.0已移除),也就是navbar-collapse类,代替的是 、toggler 4、Navbar-toggler(4.0移除):设定在屏幕小于breakpoint值时(768)显示,而在4.0则直接用collapse来展示此按钮,没有屏幕大小的限制,navbar-toggle 6、Navbar-fixed-top/bottom:都是定位在上方、下方,有浮动影响 7、Navbar-brand:品牌,可以放网页名称、公司Logo等内容 8、Navbar-toggle:用于收缩的单击的图片 float: right; margin-right: $navbar-padding-horizontal; padding: 9px 10px; @include navbar-vertical-align form都为行内元素 11、Navbar-text、navbar-btn:都在默认的基础上做了相就的兼容设置 12、Navbar提供了default、inverse两种主题,各主题下对其各自的部件都做了相应的样式兼容处理
简单理解 因为自己前端不熟悉,特别是Bootstrap,也只是学习阶段 自己调试,简单记录一些过程 头部缩进 也就是在
navbar 试下如下图的样式