Попытка обновить компонент в React Native (с помощью Lists and Lists.push) - PullRequest
Новая
       5

Попытка обновить компонент в React Native (с помощью Lists and Lists.push)

0 голосов
/ 27 сентября 2018

Так что я довольно долго ломал голову над этим и не уверен, что делать дальше.Я довольно новичок в RN (2 недели).Я создаю этот список приложений.Я использую AsyncStorage, чтобы установить два элемента в True.

Затем я проверяю, верны ли они, и помещаю элемент в массив списка, если он истинен.Если я изменю значения AsyncStorage, я хочу обновить экран, чтобы я мог очистить список и повторно нажать элементы, которые имеют значение true.

export default class CheckOut extends React.Component {

  constructor() {
    super()
    this.state = {
      refreshing: false,
      checked: false,
      one: false,
      two: false,
      list: []
    }
  }

  static navigationOptions = {
    header: null,
    };

  componentDidMount() {
    this.setState({"refreshing" : "false"});
    AsyncStorage.getItem("one").then((value) => {
        this.setState({"one" : value});
        if (this.state.one === "true"){
          this.state.list.push({
            name: 'Butter',
            avatar_url: 'https://i.imgur.com/IueK52c.png',
            checkbox: 1,
            key: 1,
          })
        }
     });
    AsyncStorage.getItem("two").then((value) => {
        this.setState({"two" : value});
        if (this.state.two === "true"){
          this.state.list.push({
            name: 'Butter Milk',
            avatar_url: 'https://i.imgur.com/9SENqe3.png',
            checkbox: 2,
            key: 2,
          })
        }
    });
  }
  _onRefresh = () => {
    this.setState({"refreshing" : "true"});
  }
  render() {
    return(
      <View containerStyle = {{backgroundColor: '#FFF'}}>

      <ScrollView containerStyle = {{backgroundColor: '#FFF'}}>

        <View>
        <ScrollView>
        <List containerStyle = {{
          flex: 1,
          marginTop: 0,
          borderTopWidth: 0,
          paddingBottom: 10
          }}>
          {this.state.list.map((l) => (
            <ListItem containerStyle = {{ height: 80, paddingTop: 15, borderTopWidth:0, borderBottomWidth: 0.25}}
              title={l.name}

            />
          ))
        }
        </List>
        </ScrollView>
        </View>
      </ScrollView>
      <TouchableOpacity
    onPress={() => this._onRefresh}
      >
        <Icon
      name={"refresh"}
      size={30}
      type='entypo'
      color="#FFF"
       />
      </TouchableOpacity>
      </View>
    )
  }
}

Извините за дерьмовое форматирование.Но да, кнопка обновления должна быть внутри сенсорной прозрачности.Я пытался изменить состояние и принудительное обновление, но они не сработали.Я хочу обновить компонент и список, а затем снова нажать на список, когда нажимаю кнопку обновления.

1 Ответ

0 голосов
/ 27 сентября 2018

Сначала, возможно, посмотрите несколько онлайн-уроков, но ...

Ваш список должен быть в пределах вашего App state.

Следовательно, ссылка this.state.list - при добавлении всписок, вы должны использовать setState

Вот несколько полезных ссылок для добавления в массив в состоянии:

Правильная модификация массивов состояний в ReactJS

Посмотрите React Docs на жизненный цикл и состояние:

https://reactjs.org/docs/state-and-lifecycle.html

...