React Native Не отображается на экране - PullRequest
0 голосов
/ 13 апреля 2020

У меня есть данные, поступающие из базы данных о пожаре. Я перебираю эти значения и пытаюсь поместить их в Listitem внутри scrollview, но по какой-то причине элементы списка просто не отображаются. Я знаю, что данные поступают правильно, потому что я записываю их на консоль. (Как видно из приведенного ниже примера кода)

Кто-нибудь знает, как решить эту проблему или что может быть причиной?

Весь рендер:

  render() {
    const {search} = this.state;

    return (
      <ImageBackground
        source={images.BackgroundImage}
        style={styles.mainContainer}>
        <CustomHeader navigation={this.props.navigation} />
        <SearchBar
          placeholder="Type Here..."
          onChangeText={this.updateSearch}
          value={search}
        />
        <ScrollView>
          {this.state.dataArr.map((value, i) => {
            if (typeof value.name === 'string') {
              console.log(value.name);
              <ListItem
                style={styles.listItem}
                key={i}
                title={value.name}
                subtitle={value.role}
                bottomDivider
              />;
            }
          })}
        </ScrollView>
      </ImageBackground>
    );
  }
}

Стили:

const styles = StyleSheet.create({
  mainContainer: {
    position: 'absolute',
    flex: 1,
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    overflow: 'hidden',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
    backgroundColor: 'blue',
  },
  listItem: {
    width: '100%',
    height: '20%',
    backgroundColor: 'red',
    padding: 0,
  }
});

Результаты Console.log (): у нас есть несколько тестов Джеффса, так что это правильно.

LOG  Tom Nook
 LOG  jeff
 LOG  jeff
 LOG  jeff
 LOG  jeff
 LOG  jeff

Ответы [ 2 ]

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

Единственное, что вы делаете неправильно, вы включаете свой ListItem в возврат

, меняйте

<ScrollView>
          {this.state.dataArr.map((value, i) => {
            if (typeof value.name === 'string') {
              console.log(value.name);
              <ListItem
                style={styles.listItem}
                key={i}
                title={value.name}
                subtitle={value.role}
                bottomDivider
              />;
            }
          })}
        </ScrollView>

на

<ScrollView>
    {this.state.dataArr.length > 0 ?  this.state.dataArr.map((value, i) => {
        if (typeof value.name === 'string') {
            console.log(value.name);
            return(
                <ListItem
                style={styles.listItem}
                key={i}
                title={value.name}
                subtitle={value.role}
                bottomDivider
              />
              )

        }
      }) : null}

    </ScrollView>

Надеюсь, это поможет!

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

Я думаю, вам нужно вернуть ListItem, иначе он ничего не возвращает для просмотра

{this.state.dataArr.map((value, i) => {
            if (typeof value.name === 'string') {
              console.log(value.name);
              return(
                <ListItem
                  style={styles.listItem}
                  key={i}
                  title={value.name}
                  subtitle={value.role}
                  bottomDivider
                />;
                )
            }
          })}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...