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

Posted 2023-01-23

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

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对象上切换显示类以隐藏/显示星号或代码。但是，如果我不知道会有多少个警报代码，该如何在固定状态下执行此操作？我可以使用动态状态-有这种情况吗？或者有人在这种情况下是否有其他最佳方法的想法？

答案

[设置状态时，请在对象中包含一个属性，以了解它们是否显示：

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>

以上是关于React Native-动态状态？或等效解决方案的主要内容，如果未能解决你的问题，请参考以下文章

在 React 中等效于来自 React Native 的 FlatList

显示：React Native 中的内联等效项

react-native 中是不是有与 RCTJavaScriptDidLoadNotification 事件等效的 Android？

React Native中状态栏设置StatusBar

react native redux

React-native：将动画值保持在状态或作为类属性？