Question

我正在使用反应本机Touchable Opacity为我悬停的盒子设置动画/赋予效果。我正在为Android TV开发一个应用程序。我想使鼠标悬停效果类似于默认的android电视主屏幕（导航时，焦点对准时，卡片变大，模糊时卡片变小）。我还使用地图来迭代许多项目。这是到目前为止我得到的。


import React, { Component } from 'react';
import { StyleSheet, View, TouchableOpacity } from 'react-native';

export default class TV extends Component {

    constructor(props) {
        super(props);
        this.state = {
            bgColor: 'gray',
            entries: [
                {
                    "albumId": 1,
                    "id": 1,
                    "title": "accusamus beatae ad facilis cum similique qui sunt",
                    "url": "https://via.placeholder.com/600/92c952",
                    "thumbnailUrl": "https://via.placeholder.com/150/92c952"
                },
                {
                    "albumId": 1,
                    "id": 2,
                    "title": "reprehenderit est deserunt velit ipsam",
                    "url": "https://via.placeholder.com/600/771796",
                    "thumbnailUrl": "https://via.placeholder.com/150/771796"
                }]
        }
    }


        render () {
        return (
            <View style={styles.thumbnailContainer}>
                {
                    this.state.entries.map((e, index) => {
                        return(

                                <TouchableOpacity onPress={()=>null} onFocus={()=>this.setState({bgColor: 'red'})} onBlur={()=>this.setState({bgColor: 'gray'})}>
                                    <View style={styles.thumbnailWrapper}></View>
                                </TouchableOpacity>

                            )
                    })
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    thumbnailContainer: {
      flex: 1,
      flexDirection:'row',
      flexWrap:'wrap'
    },
    thumbnailWrapper: {
        backgroundColor: 'gray',
        width: 50,
        height: 50
    }
})

我目前仅使用背景色进行测试。不知道如何更改样式背景颜色。如果我undefined is not an object (evaluating this.state)，它会给我backgroundColor: this.state.bgColor。

因此，当我聚焦并模糊时，如何为“卡片”制作动画，或者在这种情况下，只能显示纯视图。

编辑：

解决了问题。希望有人觉得这有用。我不确定这是否是正确的方法。但是我刚刚创建了一个状态，用于存储悬停的当前索引。如果映射索引的当前索引相同，则背景色应为红色。这是完整的代码：


import React, { Component } from 'react';
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';

export default class TV extends Component {

    constructor(props) {
        super(props);
        this.state = {
            bgColor: 'red',
            index: 0,
            entries: [
                {
                    "albumId": 1,
                    "id": 1,
                    "title": "accusamus beatae ad facilis cum similique qui sunt",
                    "url": "https://via.placeholder.com/600/92c952",
                    "thumbnailUrl": "https://via.placeholder.com/150/92c952"
                },
                {
                    "albumId": 1,
                    "id": 2,
                    "title": "reprehenderit est deserunt velit ipsam",
                    "url": "https://via.placeholder.com/600/771796",
                    "thumbnailUrl": "https://via.placeholder.com/150/771796"
                }]
        }
    }

    render() {
        return (
            <View style={styles.thumbnailContainer}>
                {
                    this.state.entries.map((e, index) => {
                        return (
                            <TouchableOpacity
                                key={e.id}
                                onFocus={() => this.setState({ bgColor: 'red', index: index })}
                                onBlur={() => this.setState({ bgColor: 'gray' })}
                            >
                                <Text style={[styles.thumbnailWrapper, this.state.index == index ? { backgroundColor: this.state.bgColor } : { backgroundColor: 'gray' }]}>{e.title}</Text>
                            </TouchableOpacity>

                        )
                    })
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    thumbnailContainer: {
        flex: 1,
        alignContent: 'center',
        justifyContent: 'center'
    },
    thumbnailWrapper: {
        width: 350,
        height: 50
    }
})

Answer 1

您正在尝试将状态传递给主类之外的backgroundColor，请注意 const styles = StyleSheet.create()在export default class TV extends Component{}状态之外只能在类内部传递

尝试一下：

import React, { Component } from 'react';
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';

export default class TV extends Component {

  constructor(props) {
    super(props);
    this.state = {
      bgColor: 'gray',
      entries: [
        {
          "albumId": 1,
          "id": 1,
          "title": "accusamus beatae ad facilis cum similique qui sunt",
          "url": "https://via.placeholder.com/600/92c952",
          "thumbnailUrl": "https://via.placeholder.com/150/92c952"
        },
        {
          "albumId": 1,
          "id": 2,
          "title": "reprehenderit est deserunt velit ipsam",
          "url": "https://via.placeholder.com/600/771796",
          "thumbnailUrl": "https://via.placeholder.com/150/771796"
        }]
    }
  }

  render() {
    return (
      <View style={[styles.thumbnailContainer, { backgroundColor: this.state.bgColor }]}>
        {
          this.state.entries.map((e, index) => {
            return (
              <TouchableOpacity
                key={e.id}
                onFocus={() => this.setState({ bgColor: 'red' })}
                onBlur={() => this.setState({ bgColor: 'gray' })}
              >
                <Text style={styles.thumbnailWrapper}>{e.title}</Text>
              </TouchableOpacity>

            )
          })
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  thumbnailContainer: {
    flex: 1,
    alignContent: 'center',
    justifyContent: 'center'
  },
  thumbnailWrapper: {
    width: 350,
    height: 50
  }
})

这应该可以解决您未定义的错误

反应本地onFocus和onBlur TouchableOpacity

1 个答案: