我想从标签页面导航到没有标签(或/和标题)的新页面。但从技术上讲,它是用标签和标题更改和打开的。我不知道怎么能这样做......这是我的项目目录:
.
.
.
src
-components
-Page1.js
-Page2.js
App.js
.
.
.
App.js代码:
import { TabNavigator } from 'react-navigation';
import Page 1 from './components/Page1';
import Page 2 from './components/Page2';
export default TabNav = TabNavigator (
{
Page1: { screen: Page1 },
Page2: { screen: Page2 },
},
);
现在在Page1&我创建了一个类Page3(在Page1中)和Page4(在第4页中)并编写了相同的代码,当我想点击文本时(使用StackNavigator),页面导航到我想要的新组件!
问题是Page3&第4页在选项卡中运行,我不想要(我想在空白页面中导航它们,没有任何标签或标题或......)我如何编程来做到这一点?帮我。谢谢:))答案 0 :(得分:3)
我找到了解决方案。当我导航到Page3(4)和navigationOptions
设置tabBarVisible: false
以隐藏 TabBar 或header: null
以显示标题。
这是一个例子:
import { StackNavigator } from 'react-navigation';
import Page2 from './../pages/Page2';
import Page4 from "../pages/Page4";
export default Home= StackNavigator ({
Page2: { screen : Page2},
Page4: { screen: Page4,
navigationOptions:{
tabBarVisible: false,
header: null
}}
})
答案 1 :(得分:1)
第一步:初始导航和您的屏幕
import { StackNavigator, } from 'react-navigation';
const App = StackNavigator({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen },
});
第二步:导航到某个页面
class HomeScreen extends React.Component {
static navigationOptions = { title: 'Welcome', };
render() {
const { navigate } = this.props.navigation;
return (
<Button title="Go to Jane's profile" onPress={() => navigate('Profile', { name: 'Jane' }) } />
);
}
}