Question

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

我正在传递平面清单项目密钥，以使相应图像出现在其中的每个项目。但是我在开关案例的开始位置正下方收到意外令牌的语法错误。请在这件事上给予我帮助语法错误：

Answer 1

您不能像这样将任意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)}

使用Switch Case React Native时的语法错误

1 个答案: