如何获取 TouchableHighlight onPress 的样式答案

【问题标题】：how to get style of TouchableHighlight onPress如何获取 TouchableHighlight onPress 的样式
【发布时间】：2016-12-25 08:46:05
【问题描述】：

当用户按下菜单中的每个项目时，我希望得到 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>
                        );
                    })
}

如何获取元素的样式？

【问题讨论】：

标签： reactjs react-native styles native react-redux

【解决方案1】：

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

【讨论】：

tnx 回答，但我不想这样做...我解决了我的问题，你可以看到它。

【解决方案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);

【讨论】：