无法使用ScrollView滚动ScrollableTabView的内容
我为选项卡创建了页面，并将视图放入了ScrollView中，但它没有向下滚动。我试图给出一个flex：1和flexGrow：1，但是并没有改变任何东西。我想要的只是文本部分可以自由向下滚动。有什么我想念的吗？或有关如何解决该问题的任何信息？
我删除了不必要的东西，例如文本样式等，所以这是脚本：
import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Animated, ScrollView, ImageBackground } from 'react-native';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import TabBar from 'react-native-underline-tabbar';
import { RFPercentage } from "react-native-responsive-fontsize";
import * as Font from "expo-font";
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#027EB3',
},
textStyle: {
marginHorizontal:"5%",
color: "white",
marginVertical: "5%",
fontFamily: "Gotham-Book"
},
imageStyle: {
width: "100%",
height:"65%"
},
ScrollViewStyle: {
flex: 1,
},
konukTextStyle: {
fontFamily: "Gotham-Book",
color: "white",
fontSize: RFPercentage(3.5)
},
konukTextViewStyle: {
flex: 1,
justifyContent: 'flex-end',
marginLeft:"5%"
}
});
const Page = ({ label, text = '' }) => (
<ScrollView style={{ flex: 1 }}>
<View style={styles.container}>
<Text style={styles.textStyle}>
{text}
</Text>
</View>
</ScrollView>
);
const Tab = ({ tab, page, isTabActive, onPressHandler, onTabLayout, styles }) => {
const { label, icon } = tab;
const style = {
marginHorizontal: 10,
paddingVertical: 5,
};
const containerStyle = {
paddingVertical: 5,
flexDirection: 'row',
alignItems: 'flex-start',
backgroundColor: styles.backgroundColor,
opacity: styles.opacity,
transform: [{ scale: styles.opacity }],
};
const textStyle = {
color: styles.textColor,
fontFamily: "Gotham-Book",
};
const iconStyle = {
tintColor: styles.textColor,
resizeMode: 'contain',
width: 22,
height: 22,
marginLeft: 10,
};
const seperator = {
width: 1.1,
backgroundColor: '#027EB3',
height: '100%',
};
return (
<TouchableOpacity style={style} onPress={onPressHandler} onLayout={onTabLayout} key={page}>
<Animated.View style={containerStyle}>
<Animated.Text style={textStyle}>{label}</Animated.Text>
<Animated.Image style={iconStyle} source={icon} />
<View style={seperator} />
</Animated.View>
</TouchableOpacity>
);
};
class UnderlineTabBarExample extends Component {
_scrollX = new Animated.Value(0);
interpolators = Array.from({ length: 10 }, (_, i) => i).map(idx => ({
scale: this._scrollX.interpolate({
inputRange: [idx - 1, idx, idx + 1],
outputRange: [1, 1.2, 1],
extrapolate: 'clamp',
}),
opacity: this._scrollX.interpolate({
inputRange: [idx - 1, idx, idx + 1],
outputRange: [0.9, 1, 0.9],
extrapolate: 'clamp',
}),
textColor: this._scrollX.interpolate({
inputRange: [idx - 1, idx, idx + 1],
outputRange: ['#027EB3', '#027EB3', '#027EB3'],
}),
backgroundColor: this._scrollX.interpolate({
inputRange: [idx - 1, idx, idx + 1],
outputRange: ['#CFF3FF', '#CFF3FF', '#CFF3FF'],
extrapolate: 'clamp',
}),
}));
render() {
if (!this.state.fontLoaded) { return null; }
return (
<View style={[styles.container]}>
<ImageBackground
source={require("../../assets/GuestImage.png")}
resizeMode="contain"
style={styles.imageStyle}
imageStyle={{ height: "118%", width:"100%" }}
>
<View style={styles.konukTextViewStyle}>
<Text style={styles.konukTextStyle}>SERDAR</Text>
<Text style={styles.konukTextStyle} >YILDIRIM, KONUK</Text>
</View>
</ImageBackground>
<View>
<ScrollableTabView
renderTabBar={() => (
<TabBar
underlineColor="#027EB3"
tabBarStyle={{ backgroundColor: "#CFF3FF", borderTopColor: '#d2d2d2', borderTopWidth: 1 }}
renderTab={(tab, page, isTabActive, onPressHandler, onTabLayout) => (
<Tab
key={page}
tab={tab}
page={page}
isTabActive={isTabActive}
onPressHandler={onPressHandler}
onTabLayout={onTabLayout}
styles={this.interpolators[page]}
/>
)}
/>
)}
onScroll={(x) => this._scrollX.setValue(x)}
>
<Page tabLabel={{ label: "PORTRAIT" }} text={`Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. \n Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis`} />
<Page tabLabel={{ label: "MYCITY" }} text={`Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. \n Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis`} />
<Page tabLabel={{ label: "CHECKING IN" }} text={`Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. \n Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis`} />
</ScrollableTabView>
</View>
</View>
);
}
}
export default UnderlineTabBarExample;
我也尝试过这种方式，但即使边框从屏幕上掉下来，也仍然无法向下滚动：
<ScrollView style={{ flex: 1, borderWidth: 2, borderColor:"red" }} tabLabel={{ label: "PORTRAIT" }}>
<View style={styles.container}>
<Text style={styles.textStyle}> {`Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. \n Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis`} </Text>
</View>
</ScrollView>
1 个答案:
答案 0 :(得分：0)
问题已修复。我只是忘了把Flex应用于。
<View style={{flex:1}}>
<ScrollableTabView
renderTabBar={() => (
<TabBar
underlineColor="#027EB3"
{...}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？