React Native中使用 react-native-scrollable-tab-view嵌套在ScrollView里，导致 子内容 在安卓上无法显示
问题：
0.9.0 或 0.8.0 版本的react-native-scrollable-tab-view如果外层使用了一个ScrollView，在Android端上是无法显示的，iOS上显示无问题。
类似代码如下：
<ScrollView style={{flex: }}>
<ItemMoment navigation={this.props.navigation} item={item} showComment={false}/>
<View style={{height: 0.5, color: "#ccc", marginTop: , marginBottom: }}/>
<ScrollableTabView
tabBarPosition='top'
initialPage={} //默认为第一页
locked={false} //表示手指是否能拖动视图，默认为false（表示可以拖动）。设为true的话，我们只能点击Tab来切换视图。
renderTabBar={() => <ScrollableTabBar/>}
tabBarUnderlineColor={'red'}
scrollWithoutAnimation={true}
tabBarBackgroundColor='#fff'
tabBarActiveTextColor='#2c2c2c'
tabBarInactiveTextColor='#666'
>
<CommentTab navigation={this.props.navigation} style={styles.textTab} tabLabel='评论(129)'/>
<CommentTab navigation={this.props.navigation} style={styles.textTab} tabLabel='转发(209)'/>
<CommentTab navigation={this.props.navigation} style={styles.textTab} tabLabel='赞(17)'/>
</ScrollableTabView>
</ScrollView>
解决办法：
查看源码后发现Android端使用的是AnimatedViewPagerAndroid，和iOS的实现有区别，可以把react-native-scrollable-tab-view/index.js中所有Android的判断给去掉，全部使用iOS的实现方式，即可解决此问题。
例如，注释掉 node_modules/react-native-scrollable-tab-view/index.js 完后的代码如下：
const React = require('react');
const { Component } = React;
const { ViewPropTypes } = ReactNative = require('react-native');
const createReactClass = require('create-react-class');
const PropTypes = require('prop-types');
const {
Dimensions,
View,
Animated,
ScrollView,
Platform,
StyleSheet,
ViewPagerAndroid,
InteractionManager,
} = ReactNative;
const TimerMixin = require('react-timer-mixin');
const SceneComponent = require('./SceneComponent');
const DefaultTabBar = require('./DefaultTabBar');
const ScrollableTabBar = require('./ScrollableTabBar');
const AnimatedViewPagerAndroid = Platform.OS === 'android' ?
Animated.createAnimatedComponent(ViewPagerAndroid) :
undefined;
const ScrollableTabView = createReactClass({
mixins: [TimerMixin, ],
statics: {
DefaultTabBar,
ScrollableTabBar,
},
scrollOnMountCalled: false,
propTypes: {
tabBarPosition: PropTypes.oneOf(['top', 'bottom', 'overlayTop', 'overlayBottom', ]),
initialPage: PropTypes.number,
page: PropTypes.number,
onChangeTab: PropTypes.func,
onScroll: PropTypes.func,
renderTabBar: PropTypes.any,
style: ViewPropTypes.style,
contentProps: PropTypes.object,
scrollWithoutAnimation: PropTypes.bool,
locked: PropTypes.bool,
prerenderingSiblingsNumber: PropTypes.number,
},
getDefaultProps() {
return {
tabBarPosition: 'top',
initialPage: ,
page: -,
onChangeTab: () => {},
onScroll: () => {},
contentProps: {},
scrollWithoutAnimation: false,
locked: false,
prerenderingSiblingsNumber: ,
};
},
getInitialState() {
const containerWidth = Dimensions.get('window').width;
let scrollValue;
let scrollXIOS;
let positionAndroid;
let offsetAndroid;
if (Platform.OS === 'ios') {
scrollXIOS = new Animated.Value(this.props.initialPage * containerWidth);
const containerWidthAnimatedValue = new Animated.Value(containerWidth);
// Need to call __makeNative manually to avoid a native animated bug. See
// https://github.com/facebook/react-native/pull/14435
containerWidthAnimatedValue.__makeNative();
scrollValue = Animated.divide(scrollXIOS, containerWidthAnimatedValue);
const callListeners = this._polyfillAnimatedValue(scrollValue);
scrollXIOS.addListener(
({ value, }) => callListeners(value / this.state.containerWidth)
);
} else {
positionAndroid = new Animated.Value(this.props.initialPage);
offsetAndroid = new Animated.Value();
scrollValue = Animated.add(positionAndroid, offsetAndroid);
const callListeners = this._polyfillAnimatedValue(scrollValue);
let positionAndroidValue = this.props.initialPage;
let offsetAndroidValue = ;
positionAndroid.addListener(({ value, }) => {
positionAndroidValue = value;
callListeners(positionAndroidValue + offsetAndroidValue);
});
offsetAndroid.addListener(({ value, }) => {
offsetAndroidValue = value;
callListeners(positionAndroidValue + offsetAndroidValue);
});
}
return {
currentPage: this.props.initialPage,
scrollValue,
scrollXIOS,
positionAndroid,
offsetAndroid,
containerWidth,
sceneKeys: this.newSceneKeys({ currentPage: this.props.initialPage, }),
};
},
componentWillReceiveProps(props) {
if (props.children !== this.props.children) {
this.updateSceneKeys({ page: this.state.currentPage, children: props.children, });
}
if (props.page >= && props.page !== this.state.currentPage) {
this.goToPage(props.page);
}
},
componentWillUnmount() {
if (Platform.OS === 'ios') {
this.state.scrollXIOS.removeAllListeners();
} else {
this.state.positionAndroid.removeAllListeners();
this.state.offsetAndroid.removeAllListeners();
}
},
goToPage(pageNumber) {
if (Platform.OS === 'ios') {
const offset = pageNumber * this.state.containerWidth;
if (this.scrollView) {
this.scrollView.getNode().scrollTo({x: offset, y: , animated: !this.props.scrollWithoutAnimation, });
}
} else {
if (this.scrollView) {
if (this.props.scrollWithoutAnimation) {
this.scrollView.getNode().setPageWithoutAnimation(pageNumber);
} else {
this.scrollView.getNode().setPage(pageNumber);
}
}
}
const currentPage = this.state.currentPage;
this.updateSceneKeys({
page: pageNumber,
callback: this._onChangeTab.bind(this, currentPage, pageNumber),
});
},
renderTabBar(props) {
if (this.props.renderTabBar === false) {
return null;
} else if (this.props.renderTabBar) {
return React.cloneElement(this.props.renderTabBar(props), props);
} else {
return <DefaultTabBar {...props} />;
}
},
updateSceneKeys({ page, children = this.props.children, callback = () => {}, }) {
let newKeys = this.newSceneKeys({ previousKeys: this.state.sceneKeys, currentPage: page, children, });
this.setState({currentPage: page, sceneKeys: newKeys, }, callback);
},
newSceneKeys({ previousKeys = [], currentPage = , children = this.props.children, }) {
let newKeys = [];
this._children(children).forEach((child, idx) => {
let key = this._makeSceneKey(child, idx);
if (this._keyExists(previousKeys, key) ||
this._shouldRenderSceneKey(idx, currentPage)) {
newKeys.push(key);
}
});
return newKeys;
},
// Animated.add and Animated.divide do not currently support listeners so
// we have to polyfill it here since a lot of code depends on being able
// to add a listener to `scrollValue`. See https://github.com/facebook/react-native/pull/12620.
_polyfillAnimatedValue(animatedValue) {
const listeners = new Set();
const addListener = (listener) => {
listeners.add(listener);
};
const removeListener = (listener) => {
listeners.delete(listener);
};
const removeAllListeners = () => {
listeners.clear();
};
animatedValue.addListener = addListener;
animatedValue.removeListener = removeListener;
animatedValue.removeAllListeners = removeAllListeners;
return (value) => listeners.forEach(listener => listener({ value, }));
},
_shouldRenderSceneKey(idx, currentPageKey) {
let numOfSibling = this.props.prerenderingSiblingsNumber;
return (idx < (currentPageKey + numOfSibling + ) &&
idx > (currentPageKey - numOfSibling - ));
},
_keyExists(sceneKeys, key) {
return sceneKeys.find((sceneKey) => key === sceneKey);
},
_makeSceneKey(child, idx) {
return child.props.tabLabel + '_' + idx;
},
renderScrollableContent() {
// if (Platform.OS === 'ios') {
const scenes = this._composeScenes();
return <Animated.ScrollView
horizontal
pagingEnabled
automaticallyAdjustContentInsets={false}
contentOffset={{ x: this.props.initialPage * this.state.containerWidth, }}
ref={(scrollView) => { this.scrollView = scrollView; }}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { x: this.state.scrollXIOS, }, }, }, ],
{ useNativeDriver: true, listener: this._onScroll, }
)}
onMomentumScrollBegin={this._onMomentumScrollBeginAndEnd}
onMomentumScrollEnd={this._onMomentumScrollBeginAndEnd}
scrollEventThrottle={}
scrollsToTop={false}
showsHorizontalScrollIndicator={false}
scrollEnabled={!this.props.locked}
directionalLockEnabled
alwaysBounceVertical={false}
keyboardDismissMode="on-drag"
{...this.props.contentProps}
>
{scenes}
</Animated.ScrollView>;
// } else {
// const scenes = this._composeScenes();
// return <AnimatedViewPagerAndroid
// key={this._children().length}
// style={styles.scrollableContentAndroid}
// initialPage={this.props.initialPage}
// onPageSelected={this._updateSelectedPage}
// keyboardDismissMode="on-drag"
// scrollEnabled={!this.props.locked}
// onPageScroll={Animated.event(
// [{
// nativeEvent: {
// position: this.state.positionAndroid,
// offset: this.state.offsetAndroid,
// },
// }, ],
// {
// useNativeDriver: true,
// listener: this._onScroll,
// },
// )}
// ref={(scrollView) => { this.scrollView = scrollView; }}
// {...this.props.contentProps}
// >
// {scenes}
// </AnimatedViewPagerAndroid>;
// }
},
_composeScenes() {
return this._children().map((child, idx) => {
let key = this._makeSceneKey(child, idx);
return <SceneComponent
key={child.key}
shouldUpdated={this._shouldRenderSceneKey(idx, this.state.currentPage)}
style={{width: this.state.containerWidth, }}
>
{this._keyExists(this.state.sceneKeys, key) ? child : <View tabLabel={child.props.tabLabel}/>}
</SceneComponent>;
});
},
_onMomentumScrollBeginAndEnd(e) {
const offsetX = e.nativeEvent.contentOffset.x;
const page = Math.round(offsetX / this.state.containerWidth);
if (this.state.currentPage !== page) {
this._updateSelectedPage(page);
}
},
_updateSelectedPage(nextPage) {
let localNextPage = nextPage;
if (typeof localNextPage === 'object') {
localNextPage = nextPage.nativeEvent.position;
}
const currentPage = this.state.currentPage;
this.updateSceneKeys({
page: localNextPage,
callback: this._onChangeTab.bind(this, currentPage, localNextPage),
});
},
_onChangeTab(prevPage, currentPage) {
this.props.onChangeTab({
i: currentPage,
ref: this._children()[currentPage],
from: prevPage,
});
},
_onScroll(e) {
if (Platform.OS === 'ios') {
const offsetX = e.nativeEvent.contentOffset.x;
if (offsetX === && !this.scrollOnMountCalled) {
this.scrollOnMountCalled = true;
} else {
this.props.onScroll(offsetX / this.state.containerWidth);
}
} else {
const { position, offset, } = e.nativeEvent;
this.props.onScroll(position + offset);
}
},
_handleLayout(e) {
const { width, } = e.nativeEvent.layout;
if (!width || width <= || Math.round(width) === Math.round(this.state.containerWidth)) {
return;
}
if (Platform.OS === 'ios') {
const containerWidthAnimatedValue = new Animated.Value(width);
// Need to call __makeNative manually to avoid a native animated bug. See
// https://github.com/facebook/react-native/pull/14435
containerWidthAnimatedValue.__makeNative();
scrollValue = Animated.divide(this.state.scrollXIOS, containerWidthAnimatedValue);
this.setState({ containerWidth: width, scrollValue, });
} else {
this.setState({ containerWidth: width, });
}
this.requestAnimationFrame(() => {
this.goToPage(this.state.currentPage);
});
},
_children(children = this.props.children) {
return React.Children.map(children, (child) => child);
},
render() {
let overlayTabs = (this.props.tabBarPosition === 'overlayTop' || this.props.tabBarPosition === 'overlayBottom');
let tabBarProps = {
goToPage: this.goToPage,
tabs: this._children().map((child) => child.props.tabLabel),
activeTab: this.state.currentPage,
scrollValue: this.state.scrollValue,
containerWidth: this.state.containerWidth,
};
if (this.props.tabBarBackgroundColor) {
tabBarProps.backgroundColor = this.props.tabBarBackgroundColor;
}
if (this.props.tabBarActiveTextColor) {
tabBarProps.activeTextColor = this.props.tabBarActiveTextColor;
}
if (this.props.tabBarInactiveTextColor) {
tabBarProps.inactiveTextColor = this.props.tabBarInactiveTextColor;
}
if (this.props.tabBarTextStyle) {
tabBarProps.textStyle = this.props.tabBarTextStyle;
}
if (this.props.tabBarUnderlineStyle) {
tabBarProps.underlineStyle = this.props.tabBarUnderlineStyle;
}
if (overlayTabs) {
tabBarProps.style = {
position: 'absolute',
left: ,
right: ,
[this.props.tabBarPosition === 'overlayTop' ? 'top' : 'bottom']: ,
};
}
return <View style={[styles.container, this.props.style, ]} onLayout={this._handleLayout}>
{this.props.tabBarPosition === 'top' && this.renderTabBar(tabBarProps)}
{this.renderScrollableContent()}
{(this.props.tabBarPosition === 'bottom' || overlayTabs) && this.renderTabBar(tabBarProps)}
</View>;
},
});
module.exports = ScrollableTabView;
const styles = StyleSheet.create({
container: {
flex: ,
},
scrollableContentAndroid: {
flex: ,
},
});
其中，注释掉的代码 如图显示即可！
附注：
笔者在实践中发现，虽然这种修改确实可以让子内容显示，但同时又产生了另外一个bug，将导致 Tab 点击就报错了。
所以，笔者最终的设计，还是 取消 ScrollView 中嵌套 ScrollableTabView
本博客地址： wukong1688
本文原文地址：https://www.cnblogs.com/wukong1688/p/10904017.html
转载请著名出处！谢谢~~