I have NavigatorIOS under Navigator and would like to hide Navigator's NavigationBar to use NavigatorIOS's bar. Is there any way to do this?
This is screenshot that I've seen. I need backend of NavigatorIOS..
The structure that I want to build is the following:
// -- draw the chart ---
$(document).ready(function(){
var ctx = null;
chart= null;
var width = 0;
var screenWidth = $(window).width();
setTimeout(function(){
width = $('##chart').parent().width();
$('##chart').attr("width",width-30);
ctx = $("##chart").get(0).getContext("2d");
chart = new Chart(ctx).Bar(data, options);
// --- resize ---
$( window ).resize(function() {
var newScreenWidth = $(window).width();
if(screenWidth != newScreenWidth){
width = $('##chart').parent().width();
$('##chart').replaceWith('<canvas id="chart" width="650" height="175"></canvas>');
$('##chart').attr("width",width-30);
ctx = $("##chart").get(0).getContext("2d");
chart = new Chart(ctx).Bar(data, options);
}
});
},500);The code that I have is the below. (Basically obtained from UIExplore examples.
├── NavigatorRoute1
│ ├── NavigatorIOSRoute1
│ ├── NavigatorIOSRoute2
│ └── NavigatorIOSRoute3
└── NavigatorRoute2
render: function(){
return (
<Navigator
initialRoute={ROUTE_STACK[this.getInitialRouteIndex()]}
initialRouteStack={ROUTE_STACK}
style={styles.container}
renderScene={this.renderScene}
navigationBar={
<Navigator.NavigationBar
routeMapper={NavigationBarRouteMapper}
style={styles.navBar}
/>
}
/>
);
}
}
I added a function to change state that handle rendering of Navigator and pass the prop to the component to change the state.
render: function(){
var nav = this.props.navigator;
return (
<NavigatorIOS
style={styles.container}
ref="nav"
initialRoute={{
component: UserSetting,
rightButtonTitle: 'Done',
title: 'My View Title',
passProps: {nav: nav},
}}
tintColor="#FFFFFF"
barTintColor="#183E63"
titleTextColor="#FFFFFF"
/>
);
}
and
hideNavBar: function(){
this.setState({hideNavBar: true});
},
render: function(){
if ( this.state.hideNavBar === true ) {
return (
<Navigator
initialRoute={ROUTE_STACK[0]}
initialRouteStack={ROUTE_STACK}
renderScene={this.renderScene}
/>
);
}else{
return (
<Navigator
initialRoute={ROUTE_STACK[this.getInitialRouteIndex()]}
initialRouteStack={ROUTE_STACK}
style={styles.container}
renderScene={this.renderScene}
navigationBar={
<Navigator.NavigationBar
routeMapper={NavigationBarRouteMapper}
style={styles.navBar}
/>
}
/>
);
}
}
答案 0 :(得分：21)
我通过定义可以检查当前路线的自定义NavigationBar来解决这个问题。看起来像这样：
render: function(){
return (
<Navigator
initialRoute={{
component: UserSetting,
rightButtonTitle: 'Done',
title: 'My View Title',
display: false,
}}
style={styles.container}
renderScene={this.renderScene}
navigationBar={
<NavigationBar
routeMapper={NavigationBarRouteMapper}
style={styles.navBar}
/>
}
/>
);
}
使用您的示例：
F:F答案 1 :(得分：15)
因为不推荐使用某些旧方法，所以我使用了stacknavigator。 如果您使用的是StackNavigator，它对我有用。
static navigationOptions = { title: 'Welcome', header: null };
如果有任何问题，请随时联系。
答案 2 :(得分：9)
在React导航（5.x）[当前版本]
中将headerShown属性设置为false，以隐藏导航栏，如下所示：
<Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
完整示例：
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
// Screen
import LoginScreen from '../screens/auth/LoginScreen';
const Stack = createStackNavigator();
const CareAndCarersNavigation = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
</Stack.Navigator>
</NavigationContainer>
)
}
export default MainNavigation
在React导航（4.0）
中要隐藏导航栏，您有 3个选项：
1。。对于单个屏幕，您可以在navigationOptions中设置标头为空
static navigationOptions = {
//To hide the ActionBar/NavigationBar
header: null,
};
2。。对于单个屏幕，您可以像这样在createStackNavigator中将标头设置为空
const App = createStackNavigator({
First: {
screen: HomeActivity,
navigationOptions: {
header: null,
},
},
});
3。。使用defaultNavigationOptions一次隐藏所有屏幕的标题
const App = createStackNavigator(
{
First: {
screen: HomeActivity,
},
},{
defaultNavigationOptions: {
header: null
},
}
);
答案 3 :(得分：6)
我这样做了：
Dashboard:{
screen: Dashboard,
navigationOptions: {
headerStyle: {display:"none"},
headerLeft: null
},
},
答案 4 :(得分：5)
如果您总是使用NavigatorIOS，您可以这样做：
修改文件NavigatorIOS.ios.js，如下所示：
before: navigationBarHidden={this.props.navigationBarHidden}
after: navigationBarHidden={route.navigationBarHidden}
navigator.push（{navigationBarHidden：false}）
答案 5 :(得分：2)
In your Navigator class it looks like you're passing in a navigation bar. You can add logic there to pass in either Navigator.NavigationBar or your NavigatorIOS bar depending on which you'd like to use. To do that you'd need to specify a state variable in Navigator that you'd update when you want the bar to change.
答案 6 :(得分：2)
将此属性与navigator.push或initialRoute一起设置为true
navigationBarHidden？：PropTypes.bool
布尔值，指示默认情况下是否隐藏导航栏。
例如：
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'LOGIN',
component: Main,
navigationBarHidden: true,
}}/>
或
this.props.navigator.replace({
title: 'ProviderList',
component: ProviderList,
passProps: {text: "hai"},``
navigationBarHidden: true,
});
答案 7 :(得分：2)
在navigationOptions中使用header：null作为react-navigation，如下所示;
navigationOptions: {
header: null,
}
答案 8 :(得分：2)
static navigationOptions = { title: 'Welcome', header: null };
答案 9 :(得分：1)
您需要像这样声明导航对象。
const StackNavigator = createStackNavigator(
{
Screen: { screen: HOME},
},
{
navigationOptions: ({ navigation }) => {
const { routeName } = navigation.state.routes[navigation.state.index];
return {
headerShown: false,
header: null,
headerTitle: routeName
};
}
}
);
答案 10 :(得分：1)
对于React Navigation 5.x
在所有屏幕上隐藏导航栏
<Stack.Navigator
screenOptions={{
headerShown: false
}}
>
<Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>
仅在一个屏幕或特定屏幕上隐藏导航栏，请参见以下代码。
<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />
有关更多信息，请参见react-navigation-5.0。