Question

我正在构建一个显示图片的简单画廊应用程序。单击一张图片将导航至其相应页面。

我有一个像这样的对象：

myWindow = new MyWindow();
myWindow.show(getSupportFragmentManager(), "confirm_dialog");

和类似的渲染功能：

export default class Home extends Component {
constructor(props) {
  super(props);
  this.state = {
    images: {
      'Mirage':   require('../img/mirage.png'),
      'Inferno':  require('../img/inferno.png'),
      'Train':    require('../img/train.png'),
      'Overpass': require('../img/ovp.png'),
      'Nuke':     require('../img/nuke.png'),
      'Cache':    require('../img/cache.png'),
      'Dust2':    require('../img/dust2.png'),
    }   

  }
}

如何循环遍历对象并获取每个成员的键和值，然后将其转移到组件中？我是React Native的新手，我正在阅读的有关映射的文档都是关于ReacJS的，我不确定它们是否相似。

不要介意名字哈哈。谢谢您的帮助！

Answer 1

使用Object.entries()和Array Destructuring

render() {
  const images = Object.entries(this.state.images).map(([key, val]) =>{  
    return <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate(...value here...)} key={key}>
        <View style={styles.imageWrapper}>
            <ImageElement imgsource = {...image url here...}></ImageElement> 
        </View>
    </TouchableWithoutFeedback>
  });
...

Answer 2

render(){
let images = [];
for (let [key, value] of Object.entries(this.state.images)) {
  images.push(<TouchableWithoutFeedback onPress={() => this.props.navigation.navigate(key)} key={key}>
        <View style={styles.imageWrapper}>
            <ImageElement imgsource = {value}></ImageElement> 
        </View>
    </TouchableWithoutFeedback>)
}
}

在View中使用{images}渲染项目。希望这会有所帮助。

关于带有本机列表的map（）函数的问题

2 个答案: