ReactNative中有個bug問題就是在Android6.0中scrollView中使用TextInput時設(shè)置textAlign=‘right’時，會導(dǎo)致滑動異常
當(dāng)使用內(nèi)部帶有scrollView的tabs拆件時，當(dāng)TextInput設(shè)置textAlign時，input輸入時tabs會異?；瑒拥阶詈笠粋€頁面，例如react-native-scrollview-tabs > 0.7時，就會出現(xiàn)此問題，此第三方組件小于0.7的版本，ios使用scrollView，android使用ViewPagerAndroid，不會導(dǎo)致異常
因此自己寫了一個可擴展的功能的tabs組件，根據(jù)需求后期可擴展功能
import?React,?{?Component?}?from?'react';
import?{
????StyleSheet,
????View,
????Text,
????ScrollView,
????FlatList,
????Dimensions,
????TouchableOpacity,
????ViewPagerAndroid,
????Platform
}?from?'react-native';
import?TabBar?from?'./tabBar'
import?uniqueId?from?'lodash/uniqueId';
import?PropTypes?from?'prop-types';
import?{?px2dp?}?from?'../_utils/';
const?WIDTH?=?Dimensions.get('window').width;
let?selfName?=?'Tabs'
class Tabs?extends?Component?{
????constructor(props){
????????super(props);
????????let?{?tabs?=?[],?initialPage?=?0,?height?}?=?this.props;
????????this.state?=?{
????????????currentPage:?initialPage,
????????????tabs:?tabs,
????????????height:??px2dp(height?*?1?)?||?px2dp(50),
????????????tabClick:?false
????????}
????????let?{?autoref?}?=?props;
????????this.id?=?autoref???`AmapTabs_${autoref}`?:?uniqueId('AmapTabs_auto_ref');
????????window.$instanceMap.set(this.id,?this)
????}
??????componentWillUnmount(){
????????window.$instanceMap.delete(this.id)
??????}
??????componentDidMount(){
??????????let?{initialPage?=?0}?=?this.props
??????????this.setTabPage(?initialPage?*?1)
??????}
??????//跳轉(zhuǎn)指定tab
??????goToTab?=?(index)?=>?{
????????this.setTabPage(index)
??????}
??????tabClick(page)?{
????????this.onTabClick(page)
????????this.setTabPage(page)
????????this.setState({?tabClick:true})
??????}
??????changeTabState(index){
????????this.setTabPage(index)
????????const?{?onChange?}?=?this.props;
????????let?callBackData?=?{?index,?componentName:?selfName?};
????????onChange?&&?onChange(callBackData)
??????}
??????onTabClick(val)?{
????????const?{?onTabClick?}?=?this.props;
????????let?callBackData?=?{?index:?val,?componentName:?selfName?};
????????onTabClick?&&?onTabClick(callBackData)
??????}
??????setTabPage(page)?{
????????let?tabIndex?=?this.state.tabs.length?-?1?
????????if?(page?>=?tabIndex)?page?=?tabIndex
????????this.setState({
????????????currentPage:page
????????},()??=>?{
????????????if?(Platform.OS?===?'ios')?{
????????????????this._scrollView.scrollTo({x:?page?*?WIDTH,?y:?0,?animated:false});
????????????}?else?{
????????????????this._viewPager.setPageWithoutAnimation(page)
????????????}
????????})??
??????}
??????componentWillUpdate?(nextProps,nextState){
????????if(nextState.currentPage?!==?this.state.currentPage?&&?nextState.tabClick){
??????????this.changeTabState(nextState.currentPage)
??????????this.setState({?tabClick:false})
????????}
????}
??????renderContent?=?()?=>?{
??????????if(Platform.OS?===?'ios'){
????????????return(
????????????????<ScrollView?style={styles.scrollViewStyle}
????????????????????ref={(scrollView)?=>?this._scrollView?=?scrollView}
????????????????????horizontal={true}
????????????????????pagingEnabled={true}
?????????????>
????????????????{React.Children.map(this.props.children,?(child,?i)?=>?{
????????????????????????return?(<View?style={{width:WIDTH,flex:1}}>{child}</View>);
????????????????????})}
????????????????</ScrollView>
????????????)
??????????}?else?{
??????????????return?(
????????????????<ViewPagerAndroid
????????????????????scrollEnabled={false}
????????????????????ref?=?{(viewPager)?=>?this._viewPager?=?viewPager}
????????????????????style={styles.viewPager}
????????????????????initialPage={0}>
????????????????????{React.Children.map(this.props.children,?(child,?i)?=>?{
????????????????????????????return?(<View?key={i}?style={{width:WIDTH,flex:1}}>{child}</View>);
????????????????????????})}
??????????????</ViewPagerAndroid>
??????????????)
??????????}
??????}
????????render(){
?????????????const?Height?=?this.state.height
?????????????const?{
????????????????tabBarUnderlineStyle?=?{}?,
????????????????tabBarTextStyle?=?{},
????????????????tabBarInactiveTextColor?=?'#808080',
????????????????tabBarActiveTextColor="#35CCA1",
????????????????tabBarWidth?=?2
?????????????}?=?this.props
????????return(
????????????<View?style={styles.container}>
????????????????<View?style={{height:Height,width:?this.WIDTH,display:'flex',flexDirection:'row'}}>
?????????????????{this.props.tabs.map((tab,?index)?=>?{
????????????????????????if?(index?==?this.state.currentPage)?{
????????????????????????????return?(
????????????????????????????????<TouchableOpacity?
????????????????????????????????????style={{??
????????????????????????????????????????flex:?1,
????????????????????????????????????????display:'flex',
????????????????????????????????????????justifyContent:?'center',
????????????????????????????????????????alignItems:?'center'
????????????????????????????????????}}
????????????????????????????????????key={index}?
????????????????????????????????????onPress={()?=>?this.tabClick(index)}>????
????????????????????????????????????<View?style={styles.tabBarView}>
????????????????????????????????????????<Text?style={[{color:tabBarActiveTextColor,fontSize:px2dp(16)},tabBarTextStyle,{lineHeight:(Height?-?px2dp(tabBarWidth))}]}>{tab.title}</Text>
????????????????????????????????????</View>
????????????????????????????????????<View?style={[{width:'100%',height:px2dp(tabBarWidth)?,backgroundColor:'rgb(53,?204,?161)'},tabBarUnderlineStyle]}></View>
????????????????????????????????</TouchableOpacity>
????????????????????????????);
????????????????????????}?else?{
????????????????????????????return?(
????????????????????????????????<TouchableOpacity?
????????????????????????????????????style={{
????????????????????????????????????????flex:?1,
????????????????????????????????????????display:'flex',
????????????????????????????????????????justifyContent:?'center',
????????????????????????????????????????alignItems:?'center'
????????????????????????????????????}}
????????????????????????????????????key={index}?
????????????????????????????????????onPress={()?=>?this.tabClick(index)}
????????????????????????????????>
????????????????????????????????????<View?style={styles.tabBarView}>
????????????????????????????????????????<Text?style={[{color:tabBarInactiveTextColor,fontSize:px2dp(16)},tabBarTextStyle,{lineHeight:(Height?-?px2dp(tabBarWidth)?)}]}>{tab.title}</Text>
????????????????????????????????????</View>
?????????????????????????????????????<View?style={{width:'100%',height:?px2dp(tabBarWidth),backgroundColor:'#fff'}}></View>
????????????????????????????????</TouchableOpacity>
????????????????????????????)
????????????????????????}
????????????????????})???
????????????????}
????????????????</View>
?????????????????{this.renderContent()}
????????</View>
????????????);
????}
}
const?styles?=?StyleSheet.create({
????container:?{
????????flex:?1,
????????backgroundColor:?'#fff',
????},
????tabBarView:{
????????flex:1,
????????backgroundColor:?'#fff',
????????justifyContent:?'center',
????????alignItems:?'center'
????},
????scrollViewStyle:?{
????????backgroundColor:?'#fff'
????},
????viewPager:?{
????????flex:?1
??????},
??????pageStyle:?{
????????alignItems:?'center',
????????padding:?20,
??????}
});
AmapTabs.propTypes?=?{
????/*tabs數(shù)據(jù)?|?*/
????tabs:?PropTypes.array,
????/*tabs組件高度(不可用百分比)?|?*/
????height:?PropTypes.string,
?????/*初始化index?*/
????initialPage:?PropTypes.string,
?????/*tabBar下劃線樣式?|?*/
????tabBarUnderlineStyle:?PropTypes.string,
????/*tabBar激活Tab文字顏色?|?*/
????tabBarActiveTextColor:?PropTypes.string,
????/*tabBar非激活Tab文字顏色?|?*/
????tabBarInactiveTextColor:?PropTypes.string,
????/*tabBar文字樣式?|?*/
????tabBarTextStyle:?PropTypes.string,
????/*tabBar的寬度?|?*/
????tabBarWidth:?PropTypes.number,
????/*tab變化時觸發(fā)?$event:?{componentName:?'Tabs',?index:?number}?|?*/
????change:?PropTypes.func,
????/*tab?被點擊的回調(diào)?$event:?{componentName:?'Tabs',?index:?number}?|?*/
????tabClick:?PropTypes.func,
};
export?default Tabs;
