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

Question

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

<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 框架中得到错误，所以我猜你不能在 View 中执行 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>
  )
}