web-dev-qa-db-ja.com

ReactネイティブTouchableOpacity onPressが機能しないAndroid

TouchabelOpacityはiOSでは正常に機能しますが、onPressメソッドはAndroidで機能しません。

私の反応ネイティブバージョン：0.57.4

私のコード：

const initDrawer = navigation => (
  <TouchableOpacity
    style={{ left: 16 }}
    onPress={() => onPressDrawerButton(navigation)}
  >
    <Ionicons name="ios-menu" color="white" size={30} />
  </TouchableOpacity>
);
androidreact-nativetouchableopacitytouchablehighlight
7
user3653164

同じ問題があり、すべてのTouchableOpacityボタンはiOSビルドで正常に機能していましたが、Androidに発生しませんでした。これに遭遇しました answer here that position: absoluteはトリガーをめちゃくちゃにします。それは私の問題を解決しました。

1
Chris

私にとって、私はNativeBaseを使用していて、Androidで壊れていた次の構造を持っていました：

<List>
    <TouchableOpacity>
       <ListItem>
          <Text>Button</Text>
       </ListItem>
    </TouchableOpacity>
</List>

ListItemを削除し、テキストをTouchableOpacityの直接の子にすると、うまくいきました。

0
LukeVenter

このようにビューでアイコンをラップします。

const initDrawer = navigation => (
  <TouchableOpacity
    style={{ left: 16 }}
    onPress={() => onPressDrawerButton(navigation)}
  >
    <View style={{padding:5}}>
        <Ionicons name="ios-menu" color="white" size={30} />
    </View>
  </TouchableOpacity>
);

問題が解決しない場合は、backgroundColorを使用してアイコンのスタイルを設定すると、アイコンの半分がbackgroundColorを使用してスタイル設定されないことがわかりますので、パディングを大きくする必要があります。わかりませんが、アイコンは特にTouchableOpacityの場合、ボリュームの点で問題が発生する傾向があります。そのため、私はアイコンのパディングを使用して親ビューを作成します。他の人が言及した他の何かはpostionです：Componentボリュームを混乱させる「絶対」プロップ。

0
Amir Gorji