android - React Navigation - 在 Blurview 中包装标题和选项卡导航器会丢失 Prop
<p><p>我将 React Navigation 2 用于 Expo 的简单 RN 项目。我试图让底部的标题和选项卡显示在模糊的背景上，所以我做了一个 HOC 来用 BlurView 包装库 Header 以提供该功能。它使模糊效果很好，但不幸的是，标题、后退按钮等在此过程中丢失了。有没有办法在 React Navigation 中做到这一点，我使用的代码如下:</p>
<pre><code>const wrappedHeader = props => (
<BlurView tint="light" intensity={80} style={styles.header}>
<Header {...props}/>
</BlurView>
);
class HomeScreen extends React.Component {
static navigationOptions = {
header: props => wrappedHeader(props),
headerTitle: "Home Screen",
};
....
}
</code></pre></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>这是一个让我思考了一段时间的棘手问题。</p>
<p>这是我发现<strong>标签栏导航器</strong>获得原生 iOS 感觉的解决方案:</p>
<pre><code>import React from 'react';
import { StyleSheet } from 'react-native';
import { BlurView } from 'expo';
import { BottomTabBar } from 'react-navigation-tabs';
const styles = StyleSheet.create({
blurView: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
},
bottomTabBar: {
backgroundColor: 'transparent',
},
});
export default function TabBar(props) {
return (
<BlurView tint="light" intensity={90} style={styles.blurView}>
<BottomTabBar {...props} style={styles.bottomTabBar} />
</BlurView>
);
}
</code></pre>
<p><em>问题似乎与 <code>BlurView</code> 样式有关。</em></p>
<p>注意:只有在导航器上设置 <code>tabBarComponent</code> 选项后，此代码才能工作，如下所示:</p>
<pre><code>export default createBottomTabNavigator({
// This part should be different on your side
Feed: FeedScreen,
Me: MeScreen,
Settings: SettingsScreen,
}, {
tabBarComponent: TabBar,
});
</code></pre>
<p><strong>对于标题，</strong>我想这一定是相同的技巧，但是您需要将 <code>bottom: 0</code> 替换为 <code>top: 0</code> .</p></p>
<p style="font-size: 20px;">关于android - React Navigation - 在 Blurview 中包装标题和选项卡导航器会丢失 Prop ，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/51656804/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/51656804/
</a>
</p>
页:
[1]