反应本机-检查屏幕的渲染方法

Question

大家好，

我正在尝试创建一个本机选项卡的例子，但是每当我尝试将一些react-native-elements放入组件中时，它就会给我一个错误。我研究并发现了许多面临这一错误的人，但这并没有帮助我。

这里是我的PostScreen

import React, { Component } from 'react';
import { Button, Text, View, FlatList, StyleSheet } from 'react-native';
import { List, ListItem } from 'react-native-elements';
import styles from '../styles';

export default class PostScreen extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
      seed: 1,
      page: 1,
      users: [],
      isLoading: false,
      isRefreshing: false,
    };

   }

 handleRefresh = () => {
   this.setState({
   seed: this.state.seed + 1,
   isRefreshing: true,
 }, () => {
   this.loadUsers();
 });
};

handleLoadMore = () => {
   this.setState({
    page: this.state.page + 1
    }, () => {
    this.loadUsers();
   });
 };

 componentDidMount() {
   this.loadUsers();
 };

loadUsers = () => {
const { users, seed, page } = this.state;
this.setState({ isLoading: true });

fetch(`https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`)
  .then(res => res.json())
  .then(res => {
    this.setState({
      users: page === 1 ? res.results : [...users, ...res.results],
      isRefreshing: false,
    });
  })
  .catch(err => {
    console.error(err);
  });
};

render() {
  const list = [
  {
    name: 'Amy Farha',
    avatar_url: 
   'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'Vice President'
   },
  {
     name: 'Chris Jackson',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman'
  }
 ]

return (
  <List containerStyle={{ marginBottom: 20 }}>
    {
      list.map((l) => (
        <ListItem
          roundAvatar
          avatar={{ uri: l.avatar_url }}
          key={l.name}
          title={l.name}
        />
      ))
    }
  </List>
 )
}

这里是我的App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';

import {
  createSwitchNavigator,
  createBottomTabNavigator,
  createAppContainer
} from 'react-navigation';

import PostScreen from './src/screens/PostScreen';
import WelcomeScreen from './src/screens/WelcomeScreen';


class App extends React.Component {
   render() {
     return <AppNavigator />
   }
}
const AppNavigator = createBottomTabNavigator(
{
   WelcomeScreen: {
       screen: WelcomeScreen,
       navigationOptions: {
       tabBarIcon: ({ tintColor }) =>
           <Icon name="home" size={25} color={tintColor} />
   } 
 },
    Posts: {
       screen: PostScreen,
       navigationOptions: {
         tabBarLabel: 'PostScreen',
         tabBarIcon: ({ tintColor }) =>
           <Icon name="chart-bar" size={25} color={tintColor} />
       }
    }
 },
 {
    tabBarOptions: {
      activeTintColor: 'orange',
      inactiveTintColor: 'gray'
    }
 }
 );

 export default createAppContainer(AppNavigator);

它不需要任何react-native-elements (List，Flatlist)。对于像文本这样的普通标签，它工作得很好。

​

​

谢谢。

Answer 1

您获得该错误的原因是您正在导入List组件，该组件在react-native-elements中不可用。

您所要做的就是删除List导入，并在render方法中用View组件替换它。

以下是您编辑的代码：

import { ListItem } from 'react-native-elements';

export default class PostScreen extends React.Component {
// above code...

render() {
  const list = [
  {
    name: 'Amy Farha',
    avatar_url: 
   'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'Vice President'
   },
  {
     name: 'Chris Jackson',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman'
  }
 ];

return (
  <View style={{ marginBottom: 20 }}>
    {
      list.map((l) => (
        <ListItem
          roundAvatar
          avatar={{ uri: l.avatar_url }}
          key={l.name}
          title={l.name}
        />
      ))
    }
  </View>
 )
}