Question

我想动态地将值设置为 .map 函数中的变量，但它似乎出现语法错误。请帮帮我。

我曾经使用{}将JavaScript代码包装在html中，但这次它没有按预期工作。

此外，我还想知道是否可以访问存储在.map函数中的本地状态对象中的变量。

import React from 'react';
import { View, Text } from 'react-native';
import { Icon, Avatar } from 'react-native-elements';
    class SearchListItem extends React.Component {
  render() {
    const { id, title, shortDescription, time, locationDescription, peopleGroup } = this.props.item;
    const indexX = -28;
    const indexZ = 1.1;
    return (
      <View style={styles.containerStyle}>
        <View style={{ flexDirection: 'row' }}>
          <View style={{ width: '90%' }}>
            <Text style={styles.title}>{title}</Text>
          </View>
          <View style={{ width: '10%' }}>
            <Icon
              name='star-outline'
              type='material-community'
              color='#666666' />
          </View>
        </View>

        <View>
          <Text style={{ marginTop: 5, color: '#666666' }}>{shortDescription}</Text>
          <Text style={{ marginTop: 5 }}>{time}</Text>
          <Text style={{ marginTop: 5 }}>{locationDescription}</Text>
        </View>

        <View style={{ flexDirection: 'row', marginTop: 20  }}>
          {const i = 0}
          peopleGroup.map((people) => (
            <Avatar
              width={30}
              position='absolute'
              containerStyle={{ transform: [{translate: [-28 + (28 * i), 0, 20]}] }}
              small
              rounded
              source={{uri: "http://www.5seestar.com/jiaoxuewen/images/1701/dengchao.jpg"}}
              activeOpacity={0.7}
              />          ));

        </View>

      </View>

    );
  }
};

const styles = {
  containerStyle: {
    padding: 30,
    flexDirection: 'column',
    alignItems: 'flex-start',
    justifyContent: 'center',
    marginTop: 5
  },
  title: {
    fontWeight: 'bold',
    fontSize: 18
  }
};

export default SearchListItem;

Answer 1

你想要做的就是使用映射值的索引，所以你可以使用这个我猜：

    <View style={{ flexDirection: 'row', marginTop: 20  }}>
          {
            peopleGroup.map((people,i) => (
              <Avatar
                 width={30}
                 position='absolute'
                 containerStyle={{ transform: [{translate: [-28 + (28 * i), 0, 20]}] }}
                 small
                 rounded
                 source={{uri:"http://www.5seestar.com/jiaoxuewen/images/1701/dengchao.jpg"}}
      activeOpacity={0.7}
              />
           ));
          }
   </View>

在React / React Native .map函数中动态设置值到变量

1 个答案: