react-native - Open a new screen through a tab screen

Question

I'm trying to show a single screen when someone clicks on a text.

I created a login screen, a single screen called Test, and the main screen with a navigation container that contains two screens inside. And I would like to put inside one of the screens, a clickable text that opens a new screen when clicked.

I'm passing the navigator as a parameter too, but when I try to run my app and I click at the clickable text, I receive this message:

The action 'NAVIGATE' with payload {"name":"Test"} was not handled by any navigator.

Do you have a screen named 'Test'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

This is a development-only warning and won't be shown in production.

My routes file:

export default class App extends React.Component {

 render() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName='Login' screenOptions={{headerShown: false}}>
           <Stack.Screen name='Main' component={Main} />
           <Stack.Screen name='Login' component={Login} />
           <Stack.Screen name='Test' component={Test} />
        </Stack.Navigator>
      </NavigationContainer> 
    );
  }
}

Tab Navigator file

const Tab = createBottomTabNavigator();

export default function App ({navigation}){
  return (
    <NavigationContainer independent={true} >
      <Tab.Navigator>

      <Tab.Screen
          name="Profile"
          component={ProfileScreen}
          options={{
            tabBarLabel: 'Perfil',
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="home-outline" color={color} size={size} />
            ),
          }}
        />

        <Tab.Screen
          name="List"
          component={ListScreen}
          initialParams={{ navigation: navigation }} 
          options={{
            tabBarLabel: 'List'
          }}
        />

      </Tab.Navigator>
    </NavigationContainer>
  );
}

ListScreen function (contains the screen that shows a clickable text)

function ListScreen(param) {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "#fff" }}>
      <LinearGradient
      colors={['#000f17', '#0c3552']}
      style={styles.main_container}>
        <SafeAreaView style={styles.main_subcontainer}>
          <List navigate={param}/>
        </SafeAreaView>
      </LinearGradient>
    </SafeAreaView>
  );
}

List component

export class List extends Component {
  constructor(props) {
    super(props);
    console.log(this.props.navigate.navigation.navigate);
  }
  render() {
    return (
      <View>
        <ScrollView>
        <TouchableOpacity onPress={() => {
         this.props.navigate.navigation.navigate('Test')
        }}>
        <Text>Click Here</Text>
        </TouchableOpacity>
        </ScrollView>
      </View>
    );
  }
}

标签： react-native