Question

我的代码有奇怪的问题。

当我动态更改字体大小时，静态listItem文本也会更改。但是动态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

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

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

注意：不推荐使用列表。使用列表进行动态列表生成是不推荐用于渲染列表的更高级实现动态地看一看nativebase-tutorial。改用Flatlist。

更改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的动态列表视图中更改字体大小？

1 个答案: