Реагируйте на собственный ScrollView, не прокручивая до конца - PullRequest
Новая
       23

Реагируйте на собственный ScrollView, не прокручивая до конца

0 голосов
/ 14 февраля 2019

Итак, у меня есть немного уникальный случай, и у меня много проблем с выяснением макетов flexbox.У меня в основном есть один «заголовок», который остается фиксированным вверху («headerContainer»), а затем ScrollView под ним, который оборачивает контейнер HTMLView (https://github.com/jsdf/react-native-htmlview).

). Проблема в том, что ScrollView не будет прокручиваться дов нижней части содержимого HTMLView. Я пытался добавить поле в HTMLView, но дополнительная сумма, которую мне пришлось прокручивать, кажется переменной, поэтому иногда я получаю большой разрыв между объемом прокрутки и содержимым.видите, что у меня есть TouchableOpacity ниже HTMLView, и это опять-таки слишком далеко для 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

1 Ответ

0 голосов
/ 15 февраля 2019

Хорошо, я понял это!Они должны были использовать свойство stickyHeaderIndices для 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 = ''
    }

    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
...