Question

我一直在从React Native那里得到一个抱怨我的阵列声明的SyntaxError，我没有看到即将发生的问题，我错过了什么？我知道这可能是一件非常简单的事情，我很遗憾但却看不到它。

这是我的组成部分：

＆＃13;

class More extends Component {

  const items = [
    {
      title: 'Job Board',
      icon: 'home',
      screen: 'JobBoard'
    },
    {
      title: 'Leaderboard',
      icon: 'home',
      screen: 'Leaderboard'
    },
    {
      title: 'Resources',
      icon: 'home',
      screen: 'Resources'
    },
    {
      title: 'Check In',
      icon: 'home',
      screen: 'CheckIn'
    },
    {
      title: 'About',
      icon: 'home',
      screen: 'About'
    }
  ];

  render() {
    const { navigate } = this.props.navigation;

    return (
      <View style = {styles.container}>
        <List>
          {
            items.map((item, i) => {
              <ListItem
                key={i}
                title={item.title}
                leftIcon={{name: item.icon}}
                onPress={() => navigate(item.screen)}
              />
            });
          }
        </List>
      </View>
    );
  };
}

const styles = StyleSheet.create({});


export { More };

＆＃13;

Error from simulator Packager feedback

Answer 1

您可以在const items = [...]之外定义class 2个选项，也可以在constructor中定义并将其设置为state

  constructor(){
    super();
    const items = [
      {
        title: 'Job Board',
        icon: 'home',
        screen: 'JobBoard'
      },
      {
        title: 'Leaderboard',
        icon: 'home',
        screen: 'Leaderboard'
      },
      {
        title: 'Resources',
        icon: 'home',
        screen: 'Resources'
      },
      {
        title: 'Check In',
        icon: 'home',
        screen: 'CheckIn'
      },
      {
        title: 'About',
        icon: 'home',
        screen: 'About'
      }
    ];
    this.state = {
      items
    }
  }


render() {
    const { navigate } = this.props.navigation;

    return (
        <View style = {styles.container}>
            <List>
                {
                    this.state.items.map((item, i) => {
                        <ListItem
                            key={i}
                            title={item.title}
                            leftIcon={{name: item.icon}}
                            onPress={() => navigate(item.screen)}
                        />
                    });
                }
            </List>
        </View>
    );
};

React Native声明组件内部的arrart不断抛出语法错误

1 个答案: