使用Switch Case React Native时出现语法错误

问题描述 投票:0回答:1
import React from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity, Dimensions, ActivityIndicator, Image } from 'react-native';
import { Font, LinearGradient } from 'expo';

const data = [
  { key: 'C' }, { key: 'S' }, { key: 'D ' }, { key: 'E' }
];
const numColumns = 1;
export default class LanguageScreen extends React.Component {

  renderItem = ({ item, index }) => {
    return (
      <TouchableOpacity onPress={() =>{this.props.navigation.navigate(item.page)}} activeOpacity={0.95}>
        <LinearGradient
            colors={['rgb(59, 180, 203)','rgb(108, 220, 204)']}
            style={styles.contcontainer}
            start={{ x: 0, y: 1 }}
            end={{ x: 1, y: 1 }}>
            <View style={styles.titleBox}>
              <Text style={styles.title}>{item.key}</Text>
            </View>
            switch(item.key) {
              case 'C' : return (
                <View style={styles.imagecont}><Image source={require('./data/C.png')} style={styles.icon} /></View>
              );
              default: return (
                  <View style={styles.imagecont}>
                  </View>
            }
        </LinearGradient>
      </TouchableOpacity>
    );
  };

  render () {
    return (
      <FlatList
        data={data}
        style={styles.container}
        renderItem={this.renderItem}
        numColumns={numColumns}
      />
    );
  }
}

我正在传递相应图像的flatlist项目键,以显示其中的每个项目。但是我在开关案例开头的正下方获得了意外令牌的语法错误。请帮我解决这个语法错误:

react-native expo
1个回答
2
投票

您不能将任意JS语句放在返回值的中间。为了做你正在尝试的事情,我会推荐如下内容:

renderImage = (key) => {
  switch(key) {

    case 'C' : return (
                <View style={styles.imagecont}><Image source={require('./data/C.png')} style={styles.icon} /></View>
              );
    default: return (
                   <View style={styles.imagecont}>
                   </View>
             );
  }
}

然后在你的render中,用以下内容替换switch语句:

{this.renderImage(item.key)}
© www.soinside.com 2019 - 2024. All rights reserved.