javascript - 通过循环在视图中创建多个按钮

Question

我想为我的 react-native 应用程序创建多个自定义按钮。我正在使用一个包含所有信息的数组，我想遍历数组中的所有按钮并在一个视图中创建所有按钮。我试过这样的事情：

<View>
  for( let i=0; i<numberButtons; i++) {
          <TouchableOpacity style={[styles.mapView, this.props.mapViewStyle]} >
            <Image
              style={[styles.image, this.props.imageStyle]}
              source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
            />
          </TouchableOpacity>
}
</View>

这似乎行不通。我从 react-native 框架中得到错误，所以我猜你不能在视图中做 js？

我怎样才能做到这一点？

Answer 1

你可以这样做：

renderButtons = () => {
  const buttons = [];
  for( let i = 0; i < numberButtons; i++) {
     buttons.push(
      <TouchableOpacity style={[styles.mapView, this.props.mapViewStyle]}>
        <Image
          style={[styles.image, this.props.imageStyle]}
          source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
        />
      </TouchableOpacity>
    )
  }
  return buttons;
}



render() {
  return (
    <View>
      {this.renderButtons()}
    </View>
  )
}