How to navigate between different nested stacks in react navigation - react native

Question

I am new to react native. I have been using createStackNavigator to be able to navigator throughout my app.

I have created a number of different stacks. Within each stack I have my header code. I have a button in each header that I want to be able to press in order to navigate to another screen, however this screen is within another stack. How would I get access to it?

Here is my code.

 export const SearchStack = createStackNavigator({ Search: { screen: SearchScreen }); export const HomeStack = createStackNavigator({ Home: { screen: HomeScreen, navigationOptions: ({ navigation }) => ({ headerTitle: 'Home', headerRight: ( <Icon name="ios-search" color="#fff" size={30} style={{paddingRight: 20}} onPress={() => navigation.navigate('SearchStack', {}, NavigationActions.navigate({ routeName: 'Search'}))} /> ), headerTitleStyle:{ color: "white", alignSelf: "center", fontSize: 20 }, headerStyle:{ backgroundColor: "#404042" } }), }, Listen: { screen: MainScreen, navigationOptions: { headerTitle: 'Listen', headerRight: ( <Icon name="ios-search" color="#fff" size={30} style={{paddingRight: 20}} onPress={() => navigation.navigate('Search')} /> ), headerTitleStyle:{ color: "white", alignSelf: "center", fontSize: 20 }, headerStyle:{ backgroundColor: "#404042" } } }, }, });

Answer 1

通常，您可以调用任何您想要的屏幕，只要它在其中一个堆栈中即可。