React-native - прокрутка до нижнего колонтитула FlatList - PullRequest
Новая
       31

React-native - прокрутка до нижнего колонтитула FlatList

0 голосов
/ 21 июня 2020

Я использую @react-navigation/bottom-tabs вместе с FlatList, который занимает немного места на экране. Я использую кнопку внутри опоры ListFooterComponent, которая при нажатии отображает дополнительную информацию внизу. Я хотел бы прокрутить до моего контейнера «результат» при нажатии этой кнопки. В настоящее время я использую метод scrollToEnd, который прокручивает до последнего элемента внутри FlatList. Полагаю, я смотрю на что-то вроде scrollTo в jQuery ... Возможно ли это? 

onCalculate = () => {
    this.flatListRef.current.scrollToEnd({animated: true});
    // Scroll to results container
};

...


ListFooterComponent={() => {
    return (
        <View style={formStyles.actionContainer}>
            <View style={formStyles.addButtonContainer}>
                <TouchableOpacity
                    activeOpacity={1}
                    style={[formStyles.addButton, theme.addButton]}
                    onPress={this.addOrder}>
                        <FeatherIcon name={'plus'} style={[formStyles.addButtonIcon, theme.addButtonIcon]} />
                </TouchableOpacity>
            </View>
            <View style={formStyles.calculateButtonContainer}>
                <TouchableOpacity
                    activeOpacity={1}
                    style={[formStyles.calculateButton, theme.calculateButton]}
                    onPress={() => {
                        this.calculateOrder();
                    }}>
                    <Text
                        style={[
                        formStyles.calculateButtonText,
                        theme.calculateButtonText,
                    ]}>{calculateLabel}</Text>
                        <FeatherIcon name={'arrow-right'} style={[formStyles.calculateButtonIcon, theme.calculateButtonIcon,]}/>
                </TouchableOpacity>
            </View>
            {!!this.state.result && this.renderResultContainer()}
        </View>
    );
}}
...