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

Question

我不断收到来自 React Native 的 SyntaxError 抱怨我的数组声明，我没有看到迫在眉睫的问题，我错过了什么？我知道这可能是我想念但看不到的非常简单的东西。

这是我的组件：

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

Error from simulator Packager feedback

Answer 1

您有 2 个选项，要么在 class 之外定义 const items = [...]，要么在 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>
    );
};