如何获得 TouchableHighlight onPress 的样式

Question

我想要当用户按下我的菜单中的每个项目时获取 width 和 offset 离开该元素并设置状态...这是我的代码：

{clearMenuItems && clearMenuItems.map((item, index)=> {
                        return (
                            <TouchableElement
                                key={index}
                                underlayColor='#f2f2f2'
                                style={styles.item}
                                onPress={()=>{handleOnPress(item)}}
                            >
                                <Text style={styles.text}>{item.title}</Text>
                            </TouchableElement>
                        );
                    })
}

如何获取元素的样式？

Answer 1

TouchableHithlight中有underlayColor道具。您可以自定义颜色。如果您想更改其他内容，则必须在按下按钮组件时应用不同的样式。最好将 Touchable 包装在您自己的组件中，例如您可以添加状态或样式。

Answer 2

这是一个如何获取元素样式的示例：

 'use strict';

    var React = require('react-native');
    var {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      TouchableOpacity,
    } = React;


    var TestIt = React.createClass({
      measureWelcome() {
        this.refs.welcome.measure(this.logWelcomeLayout);
      },

      logWelcomeLayout(ox, oy, width, height, px, py) {
        console.log("ox: " + ox);
        console.log("oy: " + oy);
        console.log("width: " + width);
        console.log("height: " + height);
        console.log("px: " + px);
        console.log("py: " + py);
      },

      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.welcome} ref="welcome">
              Welcome to React Native!
            </Text>
            <TouchableOpacity onPress={this.measureWelcome}>
              <Text>Measure it</Text>
            </TouchableOpacity>
          </View>
        );
      }
    });

    var styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });

    AppRegistry.registerComponent('TestIt', () => TestIt);

如何获得 TouchableHighlight onPress 的样式

how to get style of TouchableHighlight onPress

styles

native

reactjs

react-native

react-redux