React Native利用ScrollableTabView实现Tab+ViewPager效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/AmazingUU/article/details/77203513

效果图：

参考这篇文章（http://www.jianshu.com/p/b7788c3d106e）实现了简单的Tab+ViewPager效果。然后将里面的Text改为FlatList来显示更多数据。接着我想点击里面的数据跳转到另一个界面。但是没有找到FlatList 的点击回调函数，找了找资料才发现，不像Android里的控件有onClick方法，React Native里需要在要实现点击相应的控件外面加上”Touchable”开头的一系列组件来实现的。（http://reactnative.cn/docs/0.47/handling-touches.html#content）

例如：

class MyButton extends Component {
  _onPressButton() {
    console.log("You tapped the button!");
  }

  render() {
    return (
      <TouchableHighlight onPress={this._onPressButton}>
        <Text>Button</Text>
      </TouchableHighlight>
    );
  }
}

在FlatList里的Text外加入Touchable标签后（只需关注Touchable里的）

<FlatList
          data={[
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
          ]}
          renderItem={({item}) => 

          <TouchableNativeFeedback
              onPress = {this.onPress}>
               <Text style={styles.item}>{item.key}</Text>
          </TouchableNativeFeedback>
          }
        />
        。。。

        onPress（）{
        。。。
        }

这样可以相应点击事件了，但是还需要知道点击的是哪个item的Text，需要把item传递给onPress（），我以为只需修改两行代码

    。。。
    onPress = {this.onPress（item）}>
    。。。
    onPress（item）{
    。。。
    }

就可以了，实际上是不行的，React Native里传递参数是这样写的

    。。。
    onPress = {this.onPress.bind（this,item）}>
    。。。
    onPress（item）{
    。。。
    }

然后把FlatList封装一下，命名为MyFlatList

class MyFlatList extends Component{
  render(){
    var dataSource = this.props.dataSource;
    var renderItem = this.props.renderItem;
    return(
      <FlatList 
      data = {dataSource.list}
      renderItem = {renderItem}
      />
    )
  }
}
。。。
//使用方法
render() {
    var dataSource1 = {
      tab:'Tab1',
      list:[
      {key: 'item0',index:'0'},
      {key: 'item1',index:'1'},
      {key: 'item2',index:'2'},
      {key: 'item3',index:'3'},
      ]
    } 
return (
          。。。          
          <ScrollableTabView
          style={styles.pagerView}
          renderTabBar={() => <DefaultTabBar />}
          tabBarUnderlineStyle={styles.lineStyle}
          tabBarActiveTextColor='#FF0000'>          

          <MyFlatList tabLabel = {dataSource1.tab}//ScrollableTabView子视图需要使用tabLabel属性，表示对应Tab显示的文字
          dataSource = {dataSource1}
          renderItem = {({item}) =>
              <TouchableNativeFeedback
                  onPress = {this.onPress.bind(this,item)}>
                  <Text style = {styles.textMainStyle}>{item.key}</Text>
              </TouchableNativeFeedback>
        }
        />

接着就要处理跳转事件了，是利用Navigation实现的（http://reactnative.cn/docs/0.47/navigation.html#content）
需要注意的是注册时要换成StackNavigator的名称，例如：

    const App = StackNavigator({
      Main: { screen: MainScreen },
      Details: { screen: DetailsScreen },
    });
    。。。
    //AwesomeProject为init时的工程名字
    AppRegistry.registerComponent('AwesomeProject', () => App);

传递的参数是uri，跳转到的新界面是用WebView来进行显示

    <WebView    
        source={{uri:params.uri,method: 'GET'}}  
        javaScriptEnabled={true}  
        startInLoadingState={true}  
        domStorageEnabled={true}  
        scalesPageToFit={false}  
     />  

完整代码：

import React, { Component } from 'react';
import ScrollableTabView, {DefaultTabBar,ScrollableTabBar} from 'react-native-scrollable-tab-view';
import { AppRegistry, FlatList, StyleSheet, Text, View, TouchableNativeFeedback, WebView} from 'react-native';
import { StackNavigator } from 'react-navigation';

var Dimensions = require('Dimensions');
var ScreenWidth = Dimensions.get('window').width;

class DetailsScreen extends Component{

  render(){
    const {params} = this.props.navigation.state;
    return(
      <View style = {styles.container}>
      <WebView    
        source={{uri:params.uri,method: 'GET'}}  
        javaScriptEnabled={true}  
        startInLoadingState={true}  
        domStorageEnabled={true}  
        scalesPageToFit={false}  
      />  
      </View>
      )
  }
}


class MyFlatList extends Component{
  render(){
    var dataSource = this.props.dataSource;
    var renderItem = this.props.renderItem;
    return(
      <FlatList 
      data = {dataSource.list}
      renderItem = {renderItem}
      />
    )
  }
}

class MainScreen extends Component {
  static navigationOptions = { header: null };

  render() {

    var dataSource1 = {
      tab:'Tab1',
      list:[
      {key: 'item0',index:'0'},
      {key: 'item1',index:'1'},
      {key: 'item2',index:'2'},
      {key: 'item3',index:'3'},
      ]
    } 
    var dataSource2 = {
      tab:'Tab2',
      list:[
      {key: 'item4',index:'4'},
      {key: 'item5',index:'5'},
      {key: 'item6',index:'6'},
      {key: 'item7',index:'7'},
      ]
    } 
    var dataSource3 = {
      tab:'Tab3',
      list:[
      {key: 'item8',index:'8'},
      {key: 'item9',index:'9'},
      {key: 'item10',index:'10'},
      {key: 'item11',index:'11'},
      ]
    } 
        // const {navigate} = this.props.navigation;
        return (
          <View style = {styles.container}>
          <View style = {styles.headerView}><Text style = {styles.textHeaderStyle}>Header</Text>
          </View>

          <ScrollableTabView
          style={styles.pagerView}
          renderTabBar={() => <DefaultTabBar />}
          tabBarUnderlineStyle={styles.lineStyle}
          tabBarActiveTextColor='#FF0000'>          

          <MyFlatList tabLabel = {dataSource1.tab}
          dataSource = {dataSource1}
          renderItem = {({item}) =>
          <TouchableNativeFeedback
          onPress = {this.onPress.bind(this,item)}>
          <Text style = {styles.textMainStyle}>{item.key}</Text>
          </TouchableNativeFeedback>
        }
        />

        <MyFlatList tabLabel = {dataSource2.tab}
          dataSource = {dataSource2}
          renderItem = {({item}) =>
          <TouchableNativeFeedback
          onPress = {this.onPress.bind(this,item)}>
          <Text style = {styles.textMainStyle}>{item.key}</Text>
          </TouchableNativeFeedback>
        }
        />

        <MyFlatList tabLabel = {dataSource3.tab}
          dataSource = {dataSource3}
          renderItem = {({item}) =>
          <TouchableNativeFeedback
          onPress = {this.onPress.bind(this,item)}>
          <Text style = {styles.textMainStyle}>{item.key}</Text>
          </TouchableNativeFeedback>
        }
        />

        </ScrollableTabView>

        </View> 
        );
      }

      onPress(item){
        var uri = '';
        const {navigate} = this.props.navigation;
        switch(item.index){
          case '0':
          uri = 'http://www.baidu.com';
          break;  
          case '1':
          uri = 'http://www.baidu.com';
          break;
          case '2':
          uri = 'http://www.baidu.com';
          break;
          case '3':
          uri = 'http://www.baidu.com';
          break;
          case '4':
          uri = 'http://www.baidu.com';
          break;
          case '5':
          uri = 'http://www.baidu.com';
          break;
          case '6':
          uri = 'http://www.baidu.com';
          break;
          case '7':
          uri = 'http://www.baidu.com';
          break;
          case '8':
          uri = 'http://www.baidu.com';
          break;
          case '9':
          uri = 'http://www.baidu.com';
          break;
          case '10':
          uri = 'http://www.baidu.com';
          break;
          case '11':
          uri = 'http://www.baidu.com';
          break;

          default:
          uri = 'http://www.baidu.com';
          break;
        }
        navigate('Details',{uri:uri});
      }
    }

    const App = StackNavigator({
      Main: { screen: MainScreen },
      Details: { screen: DetailsScreen },
    });

    const styles = StyleSheet.create({
      container: {
       flex: 1,
       flexDirection: 'column',
       backgroundColor: 'white'
     },
     headerView:{
      flex: 1,
      backgroundColor: 'skyblue',  
      justifyContent : 'center',
      alignItems: 'center'
    },
    pagerView:{
      flex: 6,
      backgroundColor: 'white'
    },

    lineStyle: {
     // width:ScreenWidth/3,
     height: 2,
     backgroundColor: '#FF0000',
   },
   textMainStyle: {
     flex: 1,
     fontSize:40,
     marginTop:10,
     textAlign:'center',
     color: 'black'
   },

   textHeaderStyle:{
    fontSize: 40,
    color: 'white',
  }
})

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => App);