Вложенный текстовый элемент onPress не действует, почему? - PullRequest
1 голос
/ 08 июля 2020

Я разрабатываю приложение React Native с React-Navigation v5.

У меня есть компонент, в котором я использую ловушку useNavigation. В этом компоненте есть элемент Text, в котором есть вложенный элемент Text, вложенный Text объявил опору onPress, нажатие на нее должно перемещать пользователя к DetailScreen:

import {useNavigation} from '@react-navigation/native';
...

const MyComponent = () => {
    // use the hook
    const navigation = useNavigation();

    // create a custom element that has nested Text element
    const MyText = () => {
      return (
        <Text>
          Go to
          <Text
            onPress={() => {
          navigation.navigate("DetailScreen");
          console.log('PRESSED...');
        }}>
            Detail
          </Text>
          .
        </Text>
      );
    }

    return (
    <View style={styles.myStyle}>
      <MyText />
    </View>
  );

};

export default MyComponent;

Затем на одном из моих экранов я использую указанный выше компонент:

import MyComponent from '../components/MyComponent';
...
return (
   <>
    <View style={styles.theStyle}>
       <MyComponent />
    </View>
     
   </>
);
export default MyScreen;

В приложении. js приведенный выше экран используется как часть Stack.Navigator. также DetailScreen:

const Stack = createStackNavigator();

return (
    <Stack.Navigator
      initialRouteName="MyScreen">
      <Stack.Screen name="MyScreen" component={MyScreen} />
      <Stack.Screen name="DetailScreen" component={DetailScreen} />
      ...
    </Stack.Navigator>
  );

Когда я запускаю приложение, MyScreen отображается вместе с MyComponent. Но вложенный текст в MyComponent не перемещает пользователя к DetailScreen при нажатии на него. Журнал консоли console.log('PRESSED...'); также не отображается. Как правило, при нажатии на текст «Детали» никакого эффекта не происходит. Почему вложенный <Text> не кликабелен?

...