反应本机选项卡视图_renderScene从另一个类

Question

我尝试使用示例反应本地选项卡视图https://github.com/react-native-community/react-native-tab-view。我改变const FirstRoute从ListMahasiswa类调用，但有错误：FirstRoute（...）必须返回有效的React元素（或null）。 Main.js

import React, { PureComponent } from 'react'; 
import { View, StyleSheet } from 'react-native'; 
import { TabViewAnimated, TabBar, SceneMap } from 'react-native-tab-view'; 
import ListMahasiswa from './ListMahasiswa'; 
import InsertDataMhs from './InsertDataMhs'; 
import Coba from './Coba'; 

const FirstRoute =() => ListMahasiswa; 
const SecondRoute =() => <View style={[ styles.container, { backgroundColor: '#673ab7' } ]} />; 

export default class Main extends PureComponent { 
    state = { 
    index: 0, 
    routes: [ 
     { key: '1', title: 'First' }, 
     { key: '2', title: 'Second' }, 
    ], 
    }; 

    _handleChangeTab = index => this.setState({ index }); 

    _renderHeader = props => <TabBar {...props} />; 

    _renderScene = SceneMap({ 
    '1': FirstRoute, 
    '2': SecondRoute, 
    }); 

    render() { 
    return (
     <TabViewAnimated 
     style={styles.container} 
     navigationState={this.state} 
     renderScene={this._renderScene} 
     renderHeader={this._renderHeader} 
     onRequestChangeTab={this._handleChangeTab} 
     /> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    }, 
}); 

listMahasiswa.js

import React from 'react'; 
import { 
    AppRegistry, 
    Text,View,Button, ListView, Image, StyleSheet 
} from 'react-native'; 

var URL="http://www.rey1024.com/api/getListMahasiswa.php"; 
export default class ListMahasiswa extends React.Component{ 
    constructor(props){ 
    super(props); 
    var ds = new 
    ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state={ 
     dataSource: ds, 
    }; 
    } 

    AmbilDataMahasiswa() { 
    fetch(URL) 
    .then((response) => response.json()) 
    .then((responseData) => { 
     this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows 
     (responseData), 
     }); 
    }) .done(); 
    } 
    render(){ 
    this.AmbilDataMahasiswa(); 
    return(

     <View style={styles.mainContainer}> 
     <Text>Daftar Mahasiswa</Text> 
     <ListView 
      dataSource={this.state.dataSource} 
      renderRow={this.renderRow} 
     /> 
     </View> 
    ); 
    } 
    renderRow(record){ 
    return(
     <View style={styles.row} > 
     <Text>{record.nim} {record.nama}</Text> 
     </View> 
    ); 
    } 


} 

const styles = StyleSheet.create({ 
    mainContainer :{ 
    flex:1, 
    backgroundColor:'#fff' 
    }, 
    row :{ 
    borderColor: '#f1f1f1', 
    borderBottomWidth: 1, 
    flexDirection: 'row', 
    marginLeft: 10, 
    marginRight: 10, 
    paddingTop: 20, 
    }, 


}) 

有什么解决办法吗？谢谢

Answer 1

ListMahasiswa在下面的行不是一个有效的React元素。

const FirstRoute =() => ListMahasiswa; 

尝试使用JSX语法来代替：

const FirstRoute =() => <ListMahasiswa />;