Блог

Я пытаюсь показать один экран, когда кто-то нажимает на текст.

Я создал экран входа в систему, один экран под названием Test и главный экран с навигационным контейнером, который содержит два экрана внутри. И я хотел бы поместить внутри одного из экранов интерактивный текст, который открывает новый экран при нажатии.

Я тоже передаю навигатор в качестве параметра, но когда я пытаюсь запустить свое приложение и нажимаю на текст с возможностью кликабельности, я получаю это сообщение:

Действие ‘NAVIGATE’ с полезной нагрузкой {«name»:»Test»} не обрабатывалось ни одним навигатором.

У вас есть экран с именем «Тест»?

Если вы пытаетесь перейти к экрану во вложенном навигаторе, см. https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator .

Это предупреждение предназначено только для разработки и не будет отображаться в рабочей среде.

Мой файл маршрутов:

 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> 
    );
  }
}
 

Файл навигатора вкладок

 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 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>
  );
}
 

Компонент списка

 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>
    );
  }
}