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>
  )
}

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

1 个答案: