React Native - 检查 Screen 的 render 方法

Question

大家好，

我正在尝试制作 React Native 选项卡的示例，但每当我尝试将一些 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（列表、平面列表）的情况下工作。使用像文本这样的普通标签，效果很好。

谢谢。

Answer 1

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

您所要做的就是删除 List 导入并将其替换为渲染方法中的 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>
 )
}

React Native - 检查 Screen 的 render 方法

React Native - check the render method of Screen

react-native

react-native-elements