如何在 react-native 中更改动态列表视图中的字体大小？

Question

我的代码有奇怪的问题。

当我动态更改字体大小时，静态 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>
            )}
          />

上述代码中的字体大小更改无效。

问题是什么？任何人请帮助。这是一个奇怪的问题。静态列表文本字体大小改变但动态不变。

Answer 1

问题在于 Native Base 中的 List 组件仅在 dataArray 属性发生变化时更新。因此 List 无法识别 this.state.fontSize 中的更新，因此不会重新呈现。

Native Base 还警告说 List 不适合动态列表，并建议使用标准的 react-native FlatList 组件：

Note: List is deprecated. Use of List for dynamic list generation is discouraged.For more advanced implementation of rendering list dynamically, take a look at nativebase-tutorial. Use Flatlist instead.

将 List 更改为 FlatList 时，您可以特别说明 this.state.fontSize 应该通过将组件传递给 extraData 属性来更新组件。

<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>
    )}
  />

如何在 react-native 中更改动态列表视图中的字体大小？

How to change font size in dynamic list view in react-native?

javascript

react-native

native-base