React Native - Dynami c State? Или эквивалентное решение - PullRequest
1 голос
/ 06 апреля 2020

Я пытаюсь создать представление, которое отображает коды аварий - они доставляются приложению в массиве данных следующим образом:

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, чтобы скрыть / показать звезды или код. Но как мне сделать это с фиксированным состоянием, если я не знаю, сколько будет кодов тревоги? Могу ли я использовать динамическое состояние c - есть ли такая вещь - или у кого-нибудь есть другие идеи для лучшего подхода в этой ситуации, пожалуйста?

1 Ответ

1 голос
/ 06 апреля 2020

При настройке вашего состояния включите свойство в объекты для отображения:

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...