如何获取TouchableHighlight的样式

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 prop。您可以自定义颜色。如果您想更改其他内容，则必须在按下按钮组件时应用不同的样式。最好将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);