react-native - react 原生可触摸突出显示和可触摸的原生反馈，以制作我的菜单项

Question

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

有一个 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？

Answer 1

就像你说的，TouchableNativeFeedback仅适用于 Android，因此它不适用于 iOS。如果您想要一个适用于两者的解决方案，请使用 TouchableHighlight并相应地设置样式。例如，它的 underlayColor prop 允许您设置“当触摸处于事件状态时将显示的底层颜色。”

编辑:

如果您想使用 TouchableNativeFeedback适用于 Android 和 TouchableHighlight对于 iOS，您应该执行以下操作:

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 的信息.