react-native – 用于生成菜单项的原生可触摸突出显示和可触摸的

发布时间：2020-12-15 20:18:32 所属栏目：百科来源：网络整理

导读：我正在尝试实现一个基本的抽屉,但我对文档感到困惑. 有一个TouchableHighlight,还有一个TouchableNativeFeedback. TouchableNativeFeedback仅适用于Android.那么,我怎样才能最好地处理我的MenuItem组件,以便它同时处理Android和IOS？这是我到目前为止所得到

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

有一个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 prop允许您设置“触摸激活时将显示的底衬的颜色”.

编辑：

如果您想使用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的信息.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!