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项目键,以显示其中的每个项目。但是我在开关案例开头的正下方获得了意外令牌的语法错误。请帮我解决这个语法错误:
您不能将任意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)}