react-native-scrollable-tab-view，我断点的时候已经拿到数据了，但是popular模块下面的ListView总是显示空白？

Question

import React, {Component} from 'react';
import {
   StyleSheet,
   View,
   Text,
   TextInput,
   ListView
} from 'react-native';

import NavigationBar from '../common/NavigationBar';
import DataRepository from '../expand/dao/DataRepository';
import ScrollableTabView, {ScrollableTabBar} from 'react-native-scrollable-tab-view';
import RepositoryCell from '../common/RepositoryCell';

const URL = 'https://api.github.com/search/repositories?q=';
const URL_STR = '&sort=stars';

export default class PopularPage extends Component {

   render() {

       return (
           <View>
               <NavigationBar
                   title={'最热'}
                   style={{backgroundColor: '#63B8FF'}}
               />
               <ScrollableTabView
                   tabBarPosition='top'
                   renderTabBar={() => <ScrollableTabBar/>}>
                   <PopularTab tabLabel='Java'></PopularTab>
                   <PopularTab tabLabel='IOS'></PopularTab>
                   <PopularTab tabLabel='ANDROID'></PopularTab>
                   <PopularTab tabLabel='JAVASCRIPT'></PopularTab>

               </ScrollableTabView>

           </View>

       )

   }
}

class PopularTab extends Component {

   constructor(props) {
       super(props);
       this.state = {
           result: '',
           dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
       }
       this.dataRepository = new DataRepository();
   }

   genUrl(query) {
       return URL + query + URL_STR;
   }

   componentDidMount() {
       this.onLoad();
   }

   onLoad() {

       let url = this.genUrl(this.props.tabLabel);
       this.dataRepository.fetchNetRepository(url)
           .then(result => {
               this.setState({
                   dataSource: this.state.dataSource.cloneWithRows(result.items)
               })
           })
           .catch(error => {
               console.log(error);
           })
   }

   renderRow(data) {

       return <RepositoryCell data={data}/>

   }

   render() {
       return (
           <View style={{flex: 1}}>
               {/*<Text style={styles.content}>{this.state.result}</Text>*/}
               <ListView
                   dataSource={this.state.dataSource}
                   renderRow={(data) => this.renderRow(data)}
               />
           </View>
       );
   }
}

const styles = StyleSheet.create({

   text: {
       fontSize: 30,
       color: 'black'
   },
   textInput: {
       height: 40,
       borderWidth: 1,
       borderColor: 'grey'
   },
   content: {
       height: 600
   }

})

export default class RepositoryCell extends Component {
   render() {
       return (
           <View style={{margin: 10}}>
               <Text>{this.props.data.full_name}</Text>
               <Text>{this.props.data.description}</Text>
               <Text>{this.props.data.owner.avatar_url}</Text>
               <Text>{this.props.data.stargazers_count}</Text>
           </View>

       )
   }
}

Answer 1

LetsShare 2018-03-27 17:58:50

你先试试在 renderRow(data) {} 方法里，别调用自定义组件<RepositoryCell/>。直接返回<Text/>组件，看看能不能渲染的你数据。一步步排查一下问题

• 提问者 帅得漂亮 #1

  我先怀疑是react-native-scrollable-tab-view 8.0的bug，我把ListView影藏，改成Text，页面照样是空白的，Text里面的内容都没显示

• LetsShare 回复 提问者 帅得漂亮 #2

  应该可以正常使用的，你可以单独用一个空白页面测试一下。还有你试试把包裹<ScrollableTabView/>组件的最外层<View>的样式，加上flex:1试试，有可能是这个原因

• 提问者 帅得漂亮 回复 LetsShare #3

  多谢多谢，最外层<View>样式加上flex:1就可以了，这个到底是什么原因造成的？

点开查看后面1条评论

Answer 2

CrazyCodeBoy 2018-03-28 10:04:54

1. 给PopularPage的根节点指定个大小比如：style={{flex:1}}试一下；

2. 如果还是有问题将ScrollableTabBar改成DefaultTabBar再试一下；

• 提问者 帅得漂亮 #1

  多谢老师，在根节点加上flex:1可以解决，但是不知道其中的原理？