Как изменить размер шрифта в динамическом представлении списка в реагирующем? - PullRequest
Новая
       9

Как изменить размер шрифта в динамическом представлении списка в реагирующем?

0 голосов
/ 27 января 2019

У меня странная проблема с кодом.

При динамическом изменении размера шрифта статический текст listItem изменяется.Но текст динамического списка не меняется.

Вот код: 

 <List
            style={{
              backgroundColor: "#3F51B5",
              flex: 1,
              justifyContent: "center",
              alignItems: "center"
            }}
          >
            <ListItem>
              <Text
                style={{
                  fontSize: this.state.fontSize,
                  textAlign: "center",
                  color: "white"
                }}
              >
               Hello
              </Text>
            </ListItem>
          </List>

Изменение размера шрифта в приведенном выше коде работает. 

<List
            dataArray={this.state.data}
            style={{ backgroundColor: "white" }}
            renderRow={item => (
              <ListItem
                noBorder
                style={{
                  flex: 1,
                  justifyContent: "center",
                  alignItems: "center"
                }}
              >
                <Text
                  style={
                    {
                      fontSize: this.state.fontSize,
                      textAlign: "center"
                    }
                  }
                >
                  {item.line}
                </Text>
              </ListItem>
            )}
          />

Изменение размера шрифта в приведенном выше коде не работает.

В чем проблема?Кто-нибудь, пожалуйста, помогите.Это странная проблема.Размер шрифта текста статического списка изменяется, но динамический нет.

1 Ответ

0 голосов
/ 27 января 2019

Проблема в том, что компонент List в Native Base обновляется только при изменении в dataArray prop.Таким образом, обновление в this.state.fontSize не распознается списком, поэтому повторная визуализация не выполняется.

Native Base также предупреждает, что List не подходит для динамических списков, и советует использовать стандартный реагирующий FlatList компонент:

Примечание: список устарел,Использование List для генерации динамического списка не рекомендуется. Для более продвинутой реализации динамического рендеринга списка, взгляните на nativebase-tutorial.Вместо этого используйте Flatlist.

При изменении List на FlatList вы можете специально указать, что this.state.fontSize должен обновить компонент, передав его в extraData prop. 

<List
  data={this.state.data}
  extraData={this.state.fontSize} // this will cause re-render for fontSize updates
  style={{ backgroundColor: "white" }}
  renderItem={({item}) => (
    <ListItem
      noBorder
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}
      >
        <Text
          style={{
            fontSize: this.state.fontSize,
            textAlign: "center"
          }}
        >
          {item.line}
        </Text>
      </ListItem>
    )}
  />
...