Я разрабатываю приложение 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>
не кликабелен?