React-Native навигация на дочерних экранах?

Question

Как использовать навигацию на дочерних экранах?

Я создаю навигацию в App.js. а затем создать навигаторы стека для каждого экрана (в данном случае FindGroupScreen). Когда в FindGroupScreen.js я создаю дочерний экран (TravelListDetail), где я хочу использовать навигацию. Когда в FindGroupScreen я обычно просто использую

this.props.navigation.navigate('Chat');

для перехода на другой экран. Но это не работает на дочернем экране (TravelListDetail). Что я должен сделать, чтобы навигация работала на подэкранах?

App.js:

imports ...

const FindGroupStack = createStackNavigator({
    FindGroup: FindGroupScreen,
},
{ headerMode: 'none', }
);

// ...stacks

const MainBottomTab = createBottomTabNavigator(
{
    Home: HomeStack,
    FindGroup: FindGroupStack,
    Trip: TripStack,
    Chat: ChatStack,
    Menu: MenuStack,
},
{
navigationOptions: ({ navigation }) => ({
  tabBarIcon: ({ focused, tintColor }) => {
    const { routeName } = navigation.state;
    let iconName;
    if (routeName === 'Home') {
      //iconName = `facebook${focused ? '' : '-outline'}`;
      iconName = `home`;
    } else if (routeName === 'FindGroup') {
      iconName = `map-marked-alt`;
    } else if (routeName === 'Trip') {
      iconName = `map-marker-alt`;
    } else if (routeName === 'Chat') {
      iconName = `comments`;
    } else if (routeName === 'Menu') {
      iconName = `bars`;
    }
    //return <Ionicons name={iconName} size={25} color={tintColor} />;
    return <Icon name={iconName} size={20} color={tintColor} />;
  },
}),
tabBarOptions: {
  activeTintColor: '#f0ca6d',
  inactiveTintColor: '#ffffff',
  labelStyle: {
    fontSize: 12,
  },
  style: {
    backgroundColor: '#303030',
  },
},
}
);

export default createSwitchNavigator(
{
    AuthLoading: AuthLoadingScreen,
    App: MainBottomTab,
    Auth: AuthStack,
},
{
    initialRouteName: 'AuthLoading',
}
);

FindGroupScreen:

imports ...
import TravelListDetail from '../Detail/TravelListDetail';

class FindGroupScreen extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedItem: null,
      phase: 'phase-0',
    };
  }

  renderPage() {
    const { selectedItem, position, detailItem, phase } = this.state;

    return (
      <View style={{ flex: 1, backgroundColor: '#606060' }}>
        <List
          selectedItem={selectedItem}
          onItemPress={this.onItemPressed}
          phase={phase}
        />
        <TravelListDetail
          phase={phase}
          selectedItem={selectedItem}
          onBackPress={this.onBackPressed}
          onSharedElementMovedToDestination={
            this.onSharedElementMovedToDestination
          }
          onSharedElementMovedToSource={this.onSharedElementMovedToSource}
        />
      </View>
    );
  }
  render() {
    const {
      phase,
    } = this.state;

    return (
      <SharedElementRenderer>
        <View style={styles.container}>
          <ToolbarBackground
            isHidden={phase !== 'phase-1' && phase !== 'phase-2'}
          />
          {this.renderPage()}
        </View>
      </SharedElementRenderer>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default FindGroupScreen;

TravelListDetail:

      <View style={styles2.viewCenter}>
        <TouchableOpacity
            style={styles2.buttonStyle}
            activeOpacity = { .5 }
            onPress={ this.gotoChatScreen }
        >
          <Text style={styles2.buttonTextStyle}> Share Travel </Text>
        </TouchableOpacity>
      </View>

Answer 1

Передайте его в качестве опоры на экран ребенка.

<TravelListDetail
          navigation={this.props.navigation}
          phase={phase}
          selectedItem={selectedItem}
          onBackPress={this.onBackPressed}
          onSharedElementMovedToDestination={
            this.onSharedElementMovedToDestination
          }
          onSharedElementMovedToSource={this.onSharedElementMovedToSource}
        />

Затем в ребенке вы пишете:

props.navigation.navigate('Welcome')

(с префиксом this., если это компонент класса).