时间戳

首页 > 解决方案 > React Native - 动态状态？或等效的解决方案

javascript - React Native - 动态状态？或等效的解决方案

问题描述

我正在尝试构建一个显示警报代码的视图 - 这些代码以数据数组的形式传递给应用程序，如下所示：

alarm:[{ location: "Main Door", code:"123456"}, { location: "Back Door", code:"456789"}],

对于每个实例，可能有 1 个或多个代码。

我正在通过此地图功能显示代码：

return this.state.alarmsOnSite.map((data, index) => {

  return (
    <View key={index}>
    <Text style={GlobalStyles.SubHeading}>
      Alarm: {data.location}
    </Text>

      <View style={[GlobalStyles.GreyBox, {position:'relative'}]}>
        <Text style={GlobalStyles.starText}>
        ********
        </Text>

        <TouchableOpacity
          style={CheckInStyles.eyeballImagePlacement}
        >
          <View style={CheckInStyles.eyeballImage} >
            <Image
              style={CheckInStyles.eyeballImageImage}
              source={require('../images/icons/ico-eyeball.png')}
            />
          </View>
        </TouchableOpacity>
    </View>
  </View>
  )
});

简报指出，按下可触摸的不透明度 - 星星应切换为仅显示 5 秒钟的代码。我在想这对状态来说很容易——我可以在两个 Text 对象上切换一个显示类来隐藏/显示星星或代码。但是如果我不知道会有多少警报代码，我该如何在固定状态下做到这一点？我可以使用动态状态吗？

标签： javascriptreact-native

解决方案

设置您的状态时，在对象中包含一个属性，以确定它们是否正在显示：

this.state = {
    alarmsOnSite: whereverYoureGettingTheDataNow.map(obj => ({...obj, showing: false})),
    // ...
};

然后响应触摸，将该标志设置为true，然后false在五秒钟后返回。例如，如果触摸是在ToucableOpacity自身上（对不起，我不知道那个组件）：

  <View style={[GlobalStyles.GreyBox, {position:'relative'}]}>
    <Text style={GlobalStyles.starText}>
    {data.showing ? data.code : "********"}
    </Text>

    <TouchableOpacity
      style={CheckInStyles.eyeballImagePlacement}
      onTouch={() => this.showAlarm(data)}
    >
      <View style={CheckInStyles.eyeballImage} >
        <Image
          style={CheckInStyles.eyeballImageImage}
          source={require('../images/icons/ico-eyeball.png')}
        />
      </View>
    </TouchableOpacity>
</View>

...在哪里showAlarm：

showAlarm(alarm) {
    let updated = null;
    this.setState(
        ({alarmsOnSite}) => ({
            alarmsOnSite: alarmsOnSite.map(a => {
                if (a === alarm) {
                    return updated = {...a, showing: true};
                }
                return a;
            })
        }),
        () => {
            setTimeout(() => {
                this.setState(({alarmsOnSite}) => ({
                    alarmsOnSite: alarmsOnSite.map(a => a === updated ? {...a, showing: false} : a)
                }));
            }, 5000);
        }
    );
}

...或类似的。

这是一个简化的示例：

const whereverYoureGettingTheDataNow = [{ location: "Main Door", code:"123456"}, { location: "Back Door", code:"456789"}];

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            alarmsOnSite: whereverYoureGettingTheDataNow.map(obj => ({...obj, showing: false})),
            // ...
        };
    }

    showAlarm(alarm) {
        let updated = null;
        this.setState(
            ({alarmsOnSite}) => ({
                alarmsOnSite: alarmsOnSite.map(a => {
                    if (a === alarm) {
                        return updated = {...a, showing: true};
                    }
                    return a;
                })
            }),
            () => {
                setTimeout(() => {
                    this.setState(({alarmsOnSite}) => ({
                        alarmsOnSite: alarmsOnSite.map(a => a === updated ? {...a, showing: false} : a)
                    }));
                }, 5000);
            }
        );
    }

    render() {
        return <div>
            {this.state.alarmsOnSite.map((data, index) => (
                <div key={index}>
                    {data.location}
                    <div onClick={() => this.showAlarm(data)}>
                        {data.showing ? data.code : "********"}
                    </div>
                </div>
            ))}
        </div>;
    }
}

ReactDOM.render(<Example/>, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.development.js"></script>

推荐阅读