reactjs - React-Native - 以编程方式更改组件的样式(无点击)

Question

假设有 10 <Text></Text>连续的组件。这些组件将通过循环数组来创建，如下所示:

...
const fontsize = 16
return (
  <View style={{flex: 1}}>
    {
      array.map((val, index, arr) => {
        return (
          <Text ref={'text' + index} style={{fontSize: fontsize}]}>{val}</Text>
        )
      })
    }
  </View>
)
...

现在我想更改<Text>的字体大小refs 为 'text5' 的组件

我知道我可以使用 this.refs.text5.props.style.fontSize 获取/设置该组件的样式但我如何更新虚拟 DOM？

Answer 1

使用状态:https://facebook.github.io/react-native/docs/state.html

调用 this.setState 将使用更新后的状态重新渲染 View 。

例如

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fontizes: [16, 127, 2, ...]
    };
  }

  setFontsize(size, index) {
    let current = this.state.fontsizes;
    current[index] = size;
    this.setState({ fontsizes: current });
  }

  render() {
    return (
      <View style={{flex: 1}}>
        {
          array.map((val, index, arr) => {
            return (
              <Text ref={'text' + index} style={{fontSize: this.state.fontsizes[index]}]}>{val}</Text>
            )
          })
        }
      </View>
    )
  }
}