Question

我正在使用以下版本来构建应用程序

反应本机：0.57.1 react-native-cli：2.0.1 节点：v8.11.3 npm：5.6.0

表示检查List的渲染方法。所以我在下面共享List.js的代码。

List.js


import React, {Component} from 'react';
import {
  Text,
  TextInput,
  Dimensions,
  ImageBackground,
  Alert,
  TouchableHighlight,
  StyleSheet,
  NativeModules,
  PixelRatio,
  ToastAndroid,
  View,
  ListView,
  RefreshControl,
  BackHandler
} from 'react-native';

import RNExitApp from 'react-native-exit-app';
import Icon from 'react-native-vector-icons/MaterialIcons';
import Icon1 from 'react-native-vector-icons/Foundation';
import IconHeart from 'react-native-vector-icons/FontAwesome';
import Realm from 'realm';
import { Toolbar, ThemeProvider} from 'react-native-material-ui';
import { NavigationActions,Header,StackNavigator } from 'react-navigation';

import Auth from './lib/Categories/Auth';
import AndroidBackButton from './back-button';
import LocalStorage from './lib/Categories/LocalStorage';
import {MetaData,SchemaData,HistoryTable} from './Schema';
import { sync } from './Components/Sync'
import strings from './Language';
import Storage from './lib/Categories/Storage';
import costyle from './Styling';
import { GoogleAnalyticsTracker } from "react-native-google-analytics-bridge";
let tracker = new GoogleAnalyticsTracker(strings.analytics);

var RNFS=require('react-native-fs');
const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

const uiTheme = {
    palette: {
        primaryColor: '#008975',
    },
    toolbar:{
      container:{height:SCREEN_HEIGHT*0.08}
    },
};

export default class List extends Component
 {
  constructor(props) {
     super(props);
     this.state = {
        dataSource: ds.cloneWithRows([]),
        realm:null,
        refresh:false,
        timePassed:false,
        c:0,
        data:[],
     }
   }


  componentWillMount(){
    Realm.open({
      schema:[SchemaData,MetaData]
    }).then(realm => {
        this.setState({realm});
      })
    .done(()=>this.loadJSONData())
    tracker.trackEvent("Home Screen", "opened");
  }
  componentWillUnmount(){
    tracker.trackEvent("Home Screen","closed");

  }


  setSearchText(searchText){
    var arr=this.state.data;
    let results = [];
    for(var i = 0; i < arr.length; i++)
    {
      if(arr[i].property1.toLowerCase().includes(searchText.toLowerCase()))
      results.push(arr[i]);
      else if(arr[i].doctor.toLowerCase().includes(searchText.toLowerCase()))
      results.push(arr[i]);
    }
    this.setState({
        searchText,
        dataSource: this.state.dataSource.cloneWithRows(results),
    });
  }

  backOfList(){
    setTimeout(() => {this.setState({timePassed:true,c:0})}, 5000);
    var c=this.state.c;
      if (!this.state.timePassed)
      {
        this.setState({c:c+1});
        if(this.state.c==1)
          ToastAndroid.show(strings.pressExit, ToastAndroid.SHORT);
        else if(this.state.c==2){
          RNExitApp.exitApp();
        }
      }
      else
      {
        this.setState({c:1});
        ToastAndroid.show(strings.pressExit, ToastAndroid.SHORT);
        this.setState({timePassed:false});
      }
      console.log(c);
   }

  async sync() {
    this.setState({ refresh: true });
    setTimeout(() => {this.setState({ refresh: false });}, 10000);
    try{
      await sync()
    }catch(e){
    if(e.name=='TypeError'){
      await Auth.init();
    }
    else
      ToastAndroid.show(strings.wrongWarning, ToastAndroid.SHORT);
    }
      this.loadJSONData()
  }

  loadJSONData()
  {
    var arr=[];
    this.setState({dataSource: this.state.dataSource.cloneWithRows(arr)})
    console.log("inside loadJSONData")
    arr=this.state.realm.objects('SchemaData').sorted('modifiedTime',true);
    arr=arr.filtered('userId==$0 AND active==$1',LocalStorage.getItem('UserId'),true);
    this.setState({ refresh: false });
    this.setState({ data:arr,dataSource: this.state.dataSource.cloneWithRows(arr)})
  }

  renderedRow(data){
    const { navigate } = this.props.navigation;
    var files=[],file=[];
    var pCount;
    var lCount;
    var oCount;
    console.log('Render row:',data)
    if(this.state.realm!=null)
    {
      file=this.state.realm.objects('MetaData');
      files=file.filtered('ailmentId == $0 AND category == "Prescription" AND active == $1',data.id,true)
      pCount=files.length;
      files=file.filtered('ailmentId == $0 AND category == "LabWork" AND active == $1',data.id,true)
      lCount=files.length;
      files=file.filtered('ailmentId == $0 AND category == "Others" AND active == $1',data.id,true)
      oCount=files.length;
    }
    return(
      <View>
        <View style={{flex:1,marginTop:10,flexDirection:'row'}}>
          <View style={{flex:10}}>
            <TouchableHighlight underlayColor='transparent' onPress={()=>{navigate('imageGrid',{loadData:this.loadJSONData.bind(this),type:'Details',data:data})}}>
            <View>
              <Text style={{marginLeft:15,fontSize:20,fontWeight:'bold'}}>
              {data.property1}
              </Text>
              <Text style={{marginLeft:15,fontSize:15}}>{strings.prescription}: <Text style={{fontWeight:'bold'}}>{pCount}</Text> <Text style={{color:'#babcbc'}}>|</Text>{strings.labworkHeading2}: <Text style={{fontWeight:'bold'}}>{lCount}</Text> <Text style={{color:'#babcbc'}}>|</Text> {strings.others}: <Text style={{fontWeight:'bold'}}>{oCount}</Text></Text>
            </View>
            </TouchableHighlight>
          </View>
          <View style={styles.icons}>
            <Icon1 name='page-add' size={SCREEN_WIDTH*0.1} onPress={()=>{navigate('PickCategory',{data:data})}}/>
          </View>
        </View>
        <View style={[costyle.line,{marginLeft:10}]}/>
      </View>
    );
  }

  render(){
  const { navigate } = this.props.navigation;
  return (
  <View style={costyle.bagContainer}>
  <AndroidBackButton onPress={()=>{this.backOfList();return true}} />
    <ThemeProvider uiTheme={uiTheme}>
      <Toolbar
        leftElement="menu"
        size={SCREEN_WIDTH * 0.0675}
        centerElement={strings.AddDetails}
        searchable={{
          autoFocus: true,
          placeholder: strings.placeholderSearch,
          onChangeText:this.setSearchText.bind(this)
        }}
        style={{
          titleText:{fontFamily:'sans-serif',fontSize:20,fontWeight:'normal'}
        }}
        onLeftElementPress= {()=> navigate('DrawerOpen')}
      />
    </ThemeProvider>
    <ImageBackground
      source={require('./Images/BackgroundImage.png')}
      style={{ width: SCREEN_WIDTH,height: SCREEN_WIDTH * 0.1}}>
      <Text style={{marginTop:5,color:'#005b4a',fontSize:22,marginLeft:20,fontWeight:'bold'}}>{strings.wellnessrecord}</Text>
    </ImageBackground>
    <Text></Text>
    <ListView enableEmptySections
      dataSource={this.state.dataSource}
      renderRow={this.renderedRow.bind(this)}
      refreshControl={ <RefreshControl refreshing={this.state.refresh} onRefresh={this.sync.bind(this)} /> }/>
    <View>
      <TouchableHighlight style={styles.addButton}
          underlayColor='#4b9e77' onPress={()=>{navigate('AddDetails',{goback:'true'})}}>
          <Icon name='add' size={32} color='white'/>
      </TouchableHighlight>
    </View>
  </View>
    );
    }

  static navigationOptions= ({ navigation }) => ({
    header:null,
  });
}
const styles = StyleSheet.create({
  icons: {
    flex:1,
    alignItems:'flex-end',
    justifyContent:'center',
    paddingRight:20,
    paddingBottom:10,
  },
  addButton: {
    backgroundColor: '#005b4a',
    height: 60,
    width: 60,
    borderRadius: 30,
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    bottom: 20,
    right:20,
 }
});

尽管此错误已在stackoverflow中进行了讨论，但我遇到了此错误，无法解决，但我尝试了这些代码，但仍然无法正常工作。请帮助。

不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义

0 个答案: