css - React Native ScrollView 不滚动到底部
问题描述
所以我在这里有一个稍微独特的案例,我在搞清楚 flexbox 布局时遇到了很多麻烦。我基本上有一个“标题”,它固定在顶部(“headerContainer”),然后是一个 ScrollView,它包裹了一个 HTMLView 容器(https://github.com/jsdf/react-native-htmlview)。
问题是 ScrollView 不会滚动到 HTMLView 内容的底部。我曾尝试为 HTMLView 添加一个边距,但我必须滚动的额外数量似乎是可变的,所以有时我会在我可以滚动的数量和内容之间有很大的差距。您还将看到我在 HTMLView 下方有一个 TouchableOpacity,而且它又太低了,无法让 ScrollView 到达。有关如何更改我的样式以使其正常工作的任何建议?
const visitWebsiteVersion = (url) => {
OutOfAppLinking(url)
}
const PostView = (props) => {
let postTypeName;
let postIcon;
switch (props.postType) {
case 'something1':
postTypeName = 'something1'
postIcon = <FontAwesome name={'bell'} size={20} color={gray500} style={styles.iconStyles}/>
break;
case 'something2':
postTypeName = 'Something2'
postIcon = <FontAwesome name={'newspaper-o'} size={15} color={gray500} style={styles.iconStyles}/>
break;
case 'something3':
postTypeName = 'Something3'
postIcon = <FontAwesome name={'book'} size={15} color={gray500} style={styles.iconStyles}/>
break;
case 'something4':
postTypeName = 'Something4'
postIcon = <FontAwesome name={'book'} size={15} color={gray500} style={styles.iconStyles}/>
break;
default:
postTypeName = ''
postIcon = ''
}
return(
<View style={styles.postContainer}>
<View style={styles.headerContainer}>
<View style={styles.headerTopRow}>
<View style={{flexDirection: 'row'}}>
{postIcon}
<Text style={styles.postType}>{postTypeName}</Text>
</View>
<Text style={styles.postDate}>{monthDayYearConversion(props.postDate)}</Text>
</View>
<Text style={styles.postTitle}>{props.title}</Text>
<View style={styles.headerBottomRow}>
<View>
<View style={{flexDirection: 'row'}}>
<Text style={styles.authorName}>By {props.author.name}</Text>
</View>
<View style={{flexDirection: 'row'}}>
<Text style={styles.subscriptionTitle}>{props.subscription}</Text>
</View>
</View>
</View>
</View>
<ScrollView
style={styles.scrollContainer}
showsVerticalScrollIndicator={false}
>
<HTMLView
value={props.content}
stylesheet={htmlContentStylesheet}
style={styles.contentContainer}
renderNode={htmlNodeRendering}
/>
<TouchableOpacity
onPress={() => visitWebsiteVersion(props.postLink)}
style={{...inContentButton}}
>
<Text style={{fontSize: 15, color: gray100}}>Read Website Version</Text>
</TouchableOpacity>
</ScrollView>
</View>
)
}
PostView.propTypes = {
postID: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
excerpt: PropTypes.string,
content: PropTypes.string.isRequired,
postDate: PropTypes.string.isRequired,
author: PropTypes.object.isRequired,
postType: PropTypes.string.isRequired,
subscription: PropTypes.string,
postLink: PropTypes.string.isRequired,
actionsToTake: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.array
]).isRequired
}
PostView.defaultProps = {
actionsToTake: false
}
const styles = StyleSheet.create({
postContainer: {
},
headerTopRow: {
flexDirection: 'row',
justifyContent: 'space-between'
},
headerBottomRow: {
flexDirection: 'row',
marginTop: 15,
backgroundColor: postHeaderGray,
marginBottom: -16,
marginRight: -15,
marginLeft: -15,
padding: 15,
borderColor: gray200,
borderTopWidth: 2
},
headerContainer: {
borderBottomWidth: 1,
borderColor: gray100,
shadowColor: '#000',
backgroundColor: gray100,
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 1,
padding: 15
},
scrollContainer: {
...htmlContentScrollContainer
},
iconStyles: {
alignSelf: 'flex-start'
},
postTitle: {
...PostTitle,
fontSize: 25
},
postType: {
...MetaTitle,
marginLeft: 5
},
postDate: {
alignSelf: 'flex-end',
...MetaTitle
},
authorName: {
...MetaTitle,
flex: 1,
flexWrap: 'wrap'
},
authorImage: {
width: 75,
height: 75,
borderRadius: 35
},
subscriptionTitle: {
...MetaTitle,
flexWrap: 'wrap',
fontWeight: '700'
},
// This isn't the best solution but I think it will work for now
contentContainer: {
// marginBottom: 600
}
})
export default PostView
解决方案
好的,我想通了!他们的关键是使用 ScrollView 的stickyHeaderIndices属性,然后考虑到所有内容,我可以一直滚动到底部。以下是有效的代码:
const visitWebsiteVersion = (url) => {
OutOfAppLinking(url)
}
const PostView = (props) => {
let postTypeName;
let postIcon;
switch (props.postType) {
case 'something1':
postTypeName = 'Something1'
postIcon = <FontAwesome name={'bell'} size={20} color={gray500} style={styles.iconStyles}/>
break;
case 'something2':
postTypeName = 'Something2'
postIcon = <FontAwesome name={'newspaper-o'} size={15} color={gray500} style={styles.iconStyles}/>
break;
case 'something3':
postTypeName = 'Something3'
postIcon = <FontAwesome name={'book'} size={15} color={gray500} style={styles.iconStyles}/>
break;
case 'something4':
postTypeName = 'Something4'
postIcon = <FontAwesome name={'book'} size={15} color={gray500} style={styles.iconStyles}/>
break;
default:
postTypeName = ''
postIcon = ''
}
const {actionsToTake, content, postDate, title, author, subscription, postLink} = props
return(
<View style={styles.postContainer}>
<ScrollView
style={styles.scrollContainer}
showsVerticalScrollIndicator={false}
stickyHeaderIndices={[0]}
>
<View style={styles.headerContainer}>
<View style={styles.headerTopRow}>
<View style={{flexDirection: 'row'}}>
{postIcon}
<Text style={styles.postType}>{postTypeName}</Text>
</View>
<Text style={styles.postDate}>{monthDayYearConversion(postDate)}</Text>
</View>
<Text style={styles.postTitle}>{title}</Text>
<View style={styles.headerBottomRow}>
<View>
<View style={{flexDirection: 'row'}}>
<Text style={styles.authorName}>By {author.name}</Text>
</View>
<View style={{flexDirection: 'row'}}>
<Text style={styles.subscriptionTitle}>{subscription}</Text>
</View>
</View>
</View>
</View>
<View style={{...htmlContentScrollContainer}}>
{actionsToTake ?
<ActionsToTake actions={actionsToTake}/>
:null}
<HTMLView
value={content}
stylesheet={htmlContentStylesheet}
style={styles.contentContainer}
renderNode={htmlNodeRendering}
/>
<TouchableOpacity
onPress={() => visitWebsiteVersion(postLink)}
style={{...inContentButton}}
>
<Text style={{fontSize: 15, color: gray100}}>Read Website Version</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
)
}
PostView.propTypes = {
postID: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
excerpt: PropTypes.string,
content: PropTypes.string.isRequired,
postDate: PropTypes.string.isRequired,
author: PropTypes.object.isRequired,
postType: PropTypes.string.isRequired,
subscription: PropTypes.string,
postLink: PropTypes.string.isRequired,
actionsToTake: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.array
]).isRequired
}
PostView.defaultProps = {
actionsToTake: false
}
const styles = StyleSheet.create({
postContainer: {
},
headerTopRow: {
flexDirection: 'row',
justifyContent: 'space-between'
},
headerBottomRow: {
flexDirection: 'row',
marginTop: 15,
backgroundColor: postHeaderGray,
marginBottom: -16,
marginRight: -15,
marginLeft: -15,
padding: 15,
borderColor: gray200,
borderTopWidth: 2
},
headerContainer: {
borderBottomWidth: 1,
borderColor: gray100,
shadowColor: '#000',
backgroundColor: gray100,
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 1,
padding: 15,
marginBottom: 15
},
scrollContainer: {
},
iconStyles: {
alignSelf: 'flex-start'
},
postTitle: {
...PostTitle,
fontSize: 25
},
postType: {
...MetaTitle,
marginLeft: 5
},
postDate: {
alignSelf: 'flex-end',
...MetaTitle
},
authorName: {
...MetaTitle,
flex: 1,
flexWrap: 'wrap'
},
authorImage: {
width: 75,
height: 75,
borderRadius: 35
},
subscriptionTitle: {
...MetaTitle,
flexWrap: 'wrap',
fontWeight: '700'
},
// This isn't the best solution but I think it will work for now
contentContainer: {
// marginBottom: 600
}
})
export default PostView
推荐阅读
- ethereum - 什么时候需要将 ERC-1155 元数据 URI 补零到 64 个十六进制字符?
- android-studio - 如何减小 Google Play Console 的应用程序大小(我正在使用 Android Studio)
- google-cloud-platform - 缺少权限:尝试从 AI Platform (Google Cloud) 导出模型时的 storage.objects.update
- django - How to Count the number of replies from a comment in a given photo using Django Query?
- php - Symfony PHPUnit问题安装Xdebug for --coverage-html
- java - Java 安全性:在没有 pin 弹出窗口的情况下签名
- r - 将 sum 与 group_by 一起使用时行消失
- python - 什么是最好的python正则表达式,只排除一对大括号之间的一个逗号实例?
- node.js - PostgreSQL 的 TypeORM 性能问题
- php - Nginx所有页面显示404错误除了主页