导航到新视图

Question

如何正确导航到新视图？

应用程序：

• 选项卡导航器(屏幕顶部(
• StackNavigator(屏幕底部(

我希望在从StackNavigator中选择一个按钮后，打开一个新屏幕，覆盖整个应用程序。我不想看到TabNavigator和StackNavigator。

在新窗口中，我希望它是带有返回按钮的NavBar

我正在看的所有教程都展示了如何在屏幕之间切换，但我找不到上面的情况。

我想从主应用程序打开一个新窗口，然后返回

编辑：

const TopNavTabs = TabNavigator({
General: { screen: General },
Help: { screen: Help },
Tips: { screen: Tips },
}
});
export const Navigation = StackNavigator(
{
Tab: { screen: TopNavTabs },
Article: { screen: Article },
}
);
export default class App extends Component{
render(){
return(
<View>
<View>
<Navigation navigation={this.props.navigation} />
</View>
<View>
<View>
<MCIcon name="account"/>
</View>
<View>
<MIcon name="create" onPress={() => this.props.navigation.navigate('Article')} />
</View>
<View>
<FAIcon name="hashtag" />  
</View>
<View>
<FAIcon name="search" />
</View>
</View>
</View>
)
}
}

Answer 1

在StackNavigator中添加TabNavigator，如：

const TopNavTabs = TabNavigator(
{
General: { screen: General },
Help: { screen: Help },
Tips: { screen: Tips },
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Home') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
} else if (routeName === 'Settings') {
iconName = `ios-options${focused ? '' : '-outline'}`;
}
// You can return any component that you like here! We usually use an
// icon component from react-native-vector-icons
return <Ionicons name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false,
}
);
export const Navigation = StackNavigator(
{
Tab: { screen: TopNavTabs },
Article: { screen: Article },
}
);

export default class App extends Component{
render(){
return(
<Navigation  />
)
}
}