react-navigation 的抽屉效果 createDrawerNavigator (DrawerNavigator)

换个方式再爱你 發表於 2019-6-27 00:00:00

react-navigation 的抽屉效果 createDrawerNavigator (DrawerNavigator)

<h3>一、前言： </h3>
 　　react-navigation  3.x 版本中，使用createDrawerNavigator 替换原先的DrawerNavigator 方法；
　　那么，当前createBottomTabNavigator、createStackNAvigator、createDrawerNavigator、createSwitchNavigator四兄弟齐全；
　　无论使用哪一个，或者使用一个包含另一个，他们都有最终的“爸爸”——createAppContainer。
 
<h3>二、react-navigation 延伸</h3>
<ul>
<li>createStackNAvigator —— StackActions</li>
<li>createDrawerNavigator —— DrawerActions</li>
<li>createSwitchNavigator —— SwitchActions</li>
</ul>
　　StackActions、DrawerActions、SwitchActions都是对应create方法的；
　　而且都三者都扩展了 NavigationActions 中的方法
 
<h3>三、使用分析</h3>
<div class="cnblogs_code">
<pre>const MainDrawer = createDrawerNavigator({
MainStack: MainStack,
},{
order: ['MainStack'],
initialRouteName: 'MainStack',
drawerLockMode: 'locked-closed',
drawerWidth: width*0.75,
drawerPosition: 'left',
useNativeAnimations: true,
overlayColor: 'rgba(0,0,0,0.6)',
contentComponent: (props) => <CustomDrawerComponent {...props} />,
 contentOptions: {
 activeTintColor: '#fb7299',
 activeBackgroundColor: '#ccc',
 inactiveTintColor: 'balck',
}
})</pre>
</div>
<ul>
<li><code>initialRouteName</code> -第一次加载时初始选项卡路由的 routeName。</li>
<li><code>order</code> -定义选项卡顺序的 routeNames 数组。</li>
</ul>
<ul>
<li><code>drawerWidth</code> - 定义抽屉的宽度，一般使用屏宽的百分比。</li>
<li><code>drawerPosition</code> - 可选值： <code>left</code> 或 <code>right</code>，默认值： <code>left</code>。</li>
<li><code>contentComponent</code> -用于呈现抽屉内容 (例如, 导航项) 的组件。可以完全使用自定义组件。</li>
<li><code>useNativeAnimations</code> - 使用原生动画，默认值： <code>true</code>。</li>
<li><code>drawerBackgroundColor</code> - 使用抽屉背景色，默认值：<code>white</code>。</li>
<li><code>contentOptions</code> -配置抽屉内容, 请参阅下面。</li>
<ul>
<li><code>items</code> - 路由数组，可以修改或覆盖</li>
<li><code>activeItemKey</code> - 识别活动路线的关键字</li>
<li><code>activeTintColor</code> -活动选项卡的标签和图标颜色。</li>
<li><code>activeBackgroundColor</code> -活动选项卡的背景色。</li>
<li><code>inactiveTintColor</code> -"非活动" 选项卡的标签和图标颜色。</li>
<li><code>inactiveBackgroundColor</code> -非活动选项卡的背景色。</li>
<li><code>onItemPress (路由)</code> -按下某项时调用的函数</li>
<li><code>itemsContainerStyle</code> -内容节的样式对象</li>
<li><code>itemStyle</code> 样式对象的单个项, 可以包含图标和/或标签</li>
<li><code>labelStyle</code> 样式对象要覆盖 <code>文本</code> 样式内部内容部分, 当您的标签是一个字符串</li>
<li><code>activeLabelStyle</code> 样式对象若要改写活动标签的 <code>文本</code> 样式, 则标签为字符串 (合并使用 <code>labelStyle</code>)</li>
<li><code>inactiveLabelStyle</code> 样式对象在标签为字符串时覆盖 <code>文本</code> 样式的非活动标签 (与 <code>labelStyle</code> 合并)</li>
<li><code>iconContainerStyle</code> - 用于覆盖<code>View</code>图标容器样式的样式对象。</li>
</ul>
<li><code>overlayColor</code> - 可以修改抽屉剩余部分的背景色。</li>
<li>drawerLockMode - 指定抽屉的锁定模式，<code class="php"><code class="php"><code class="php">'unlocked', <code class="php">'locked-closed, <code class="php">'locked-open'。</code></code></code></code></code></li>
</ul>
<code class="php"><code class="php"><code class="php"><code class="php"> </code></code></code></code>
<h3>四，注意点</h3>
1. <code>useNativeAnimations</code> 需要设置为 true，否则抽屉的动画会很生涩；
2. <code>overlayColor</code> 可以修改抽屉剩余部分的颜色，因为自带透明度，所以仅仅修改颜色不能修改透明的，但是我们可以通过 rgba(0,0,0,0.x) 来达到效果
3. drawerLockMode - 指定抽屉的锁定模式，
<ul>
<li><code class="php"><code class="php"><code class="php">'unlocked', 表示无锁状态，可以通过手势或代码，打开关闭抽屉 </code></code></code></li>
<li><code class="php"><code class="php"><code class="php"><code class="php">'locked-closed, 表示抽屉是关闭状态时，不能通过手势打开，只能通过代码</code></code></code></code></li>
<li><code class="php"><code class="php"><code class="php"><code class="php"><code class="php">'locked-open'，表示抽屉是打开状态时，不能通过手势关闭，只能通过代码</code></code></code></code></code></li>
</ul>
 4. 代码打开和关闭抽屉的方法：
<ul>
<li>this.props.navigation.openDrawer(); 可以打开抽屉</li>
<li>this.props.navigation.closeDrawer(); 可以关闭抽屉</li>
<li>this.props.navigation.toggleDrawer(); 可以打开/关闭抽屉</li>
</ul>
  
来源：https://www.cnblogs.com/nangezi/p/11091354.html

頁: [1]

琼殿技术论坛's Archiver

react-navigation 的抽屉效果 createDrawerNavigator (DrawerNavigator)