react-native - react native 可触摸的突出显示和可触摸的 native 反馈以使我的菜单项

我正在尝试实现一个基本的抽屉，但是我对文档感到困惑。

有一个TouchableHighlight，有一个TouchableNativeFeedback。

TouchableNativeFeedback仅适用于Android。那么，如何最好地处理我的MenuItem组件，以便它可以同时处理Android和IOS？

这是到目前为止的内容，我不确定如何在此处处理不同平台特定的可触摸内容:

import React, { Component, PropTypes } from 'react';
import { TouchableHighlight, TouchableNativeFeedback, Platform, View, Text } from 'react-native';

export class MenuItem extends Component {

  handleAndroid() {

  }

  handleIOS() {

  }

  renderMenuItem() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>
          {this.props.text}
        </Text>
      </View>
    );
  }
  render() {
    return (

    );
  }
}

在Android上，我只需要使用TouchableNativeFeedback吗？

最佳答案

就像您说的那样，TouchableNativeFeedback仅是Android，因此不适用于iOS。如果您想同时使用这两种解决方案，请使用TouchableHighlight并相应设置其样式。例如，其underlayColor属性可让您设置“触摸有效时将显示的底衬颜色”。

编辑:

如果要在Android上使用TouchableNativeFeedback，在iOS上使用TouchableHighlight，则应执行以下操作:

import { Platform } from 'react-native'
...

render() {
    if (Platform.OS === 'android') {
       return (
          <TouchableNativeFeedback>
               ...
          </TouchableNativeFeedback>
       )
    } else {
       return (
          <TouchableHighlight>
               ...
          </TouchableHighlight>
       )
    }
}

编辑2:

另外，您可以为每个平台创建一个自定义组件并使用文件扩展名。例如:

MyButton.ios.js
MyButton.android.js

将这两个放在同一文件夹中，然后将MyButton用作常规组件:

import MyButton from '../path/to/component/MyButton'
...

render() {
   <MyButton/>
}

当您要在多个地方使用此组件时，这很整洁，因为您不会用if-else块填充代码。

在这里您可以阅读有关Platform Specific Code的更多信息。