Question

在从react-native添加TouchableHighlight组件时遇到问题，并且出现以下错误：

元素类型无效：需要一个字符串

如果我删除所有内容，一切正常

代码如下：

import React from 'react';
import {View, Text, Image, ScrollView} from 'react-native';
import axios from 'axios';
import {Card, CardItem, Right, Left, TouchableHighlight} from 'native-base';
import { Icon } from 'react-native-elements'

import HeaderMenu from '../Header/Header';

class homeScreen extends React.Component {

    state = {
        noticias: []
    }

    componentDidMount() {
        axios.get('URL')
        .then(res => this.setState({
            noticias: res.data
        }));
    }

    render() {
        const {navigate} = this.props.navigation;
      return (
        <View style={{flex: 1}}>
          <HeaderMenu title='Noticias'/>
          <ScrollView>
                <View style={{borderTopColor: 'white', borderTopWidth: 2}}>
                    {
                        this.state.noticias.map((noticia, index) => (
                            <TouchableHighlight onPress={() => navigate('SingleScreen')}>
                                <CardItem key={index} style={{height: 100, padding: 5, borderBottomColor: '#dee0e2', borderBottomWidth: 1}} >
                                    <View>
                                        <Image style={{width: 120, height: 80, alignSelf: 'stretch'}} source={{uri: noticia.imagen}} />
                                    </View>
                                    <View style={{height: 80, flex: 1, paddingLeft: 10}}>
                                        <Text style={{fontSize: 12, marginBottom: 8}} >{noticia.titulo}</Text>
                                    </View>
                                    <Icon style={{marginTop: 40 ,width: 20, height: '100%', color: '#343537', justifyContent: 'center', paddingLeft: 5}} name="chevron-right" />
                                </CardItem>
                            </TouchableHighlight>
                        ))
                    } 
                </View> 
            </ScrollView>
        </View>
      );
    }
  }

export default homeScreen;

已经检查了其他答案，但是没有一个能解决我的问题。

Answer 1

我发现了问题。您正在这样做。

import {Card, CardItem, Right, Left, TouchableHighlight} from 'native-base';

您正在从TouchableHighlight导入native-base，这是错误的。您必须将其删除。

您必须从本机导入TouchableHighlight

import {View, Text, Image, ScrollView,TouchableHighlight} from 'react-native';

元素类型无效：使用TouchableHighlight时应为字符串

1 个答案: