reactjs React Native Touchable Opacity不可点击

sh7euo9m 于 5个月前发布在 React

关注(0)|答案(1)|浏览(70)

我这里有一个问题。当我尝试在我的React Native应用中添加onPress时，标签根本不会按下，而当我在图标标签中添加onPress时，它确实可以工作，但这不是我想要的。
下面是我现在拥有的代码：

import { StyleSheet, Text, View, SafeAreaView ,TouchableOpacity} from 'react-native'
import React from 'react'
import tw from 'twrnc'
import { Icon } from 'react-native-elements'
import { useNavigation } from '@react-navigation/native'

const RideOptionsCard = () => {
    const navigation = useNavigation();
  return (
    <SafeAreaView>
      <View>
        <TouchableOpacity onPress={()=>{console.log("hello")}} style={tw`bg-black absolute top-6 left-5 rounded-full`} >
        <Icon  name="chevron-left" type="fontawesome"/>
        </TouchableOpacity>

        {/* <TouchableOpacity
         onPress={()=>{console.log("hello")}}
         style={tw`absolute top-6 left-5 rounded-full`}
         >
            <Icon name="chevron-left" type="fontawesome"/>
        </TouchableOpacity> */}
        <Text style={tw`text-center py-5 text-xl font-medium`}>Select A Ride</Text>
      </View>
      </SafeAreaView>
  )
}

export default RideOptionsCard

const styles = StyleSheet.create({})

字符串
我试着把onPress放在图标标签中，只要它没有被视图或可触摸不透明标签包裹，它就可以工作
enter image description here

reactjs

来源：https://stackoverflow.com/questions/77754993/react-native-touchable-opacity-not-clickable

1条答案

按热度按时间

owfi6suc1#

我发现的问题是与Text组件，因为它是重叠的图标，这是防止它检测到任何互动。
我让它工作的方式是给Text组件增加一些宽度，并从图标中删除absolute定位。

import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  TouchableOpacity,
} from "react-native";
import React from "react";
import tw from "twrnc";
import { Icon } from "react-native-elements";

const App = () => {
  return (
    <SafeAreaView>
      <View style={tw`flex-row`}>
        <TouchableOpacity
          onPress={() => {
            console.log("hello");
          }}
          style={tw`bg-black rounded-full py-5`}
        >
          <Icon name="chevron-left" type="fontawesome" />
        </TouchableOpacity>

        <Text style={tw`text-center py-5 text-xl font-medium  w-5/6`}>
          Select A Ride
        </Text>
      </View>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({});

字符串
这是它的工作snack。

赞(0）回复(0）举报 5个月前

我来回答

reactjs React Native Touchable Opacity不可点击

1条答案

相关问题

热门标签

最新问答