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

时间:2019-01-27 08:41:51

标签: javascript react-native native-base

我的代码有奇怪的问题。

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

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

出什么问题了?有人请帮忙。这是一个奇怪的问题。静态列表文本的字体大小发生变化,而动态列表则没有。

1 个答案:

答案 0 :(得分:0)

问题在于,仅当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>
    )}
  />