【问题标题】:Modal fixed, content scrollable in React Native模态固定,React Native 中的内容可滚动
【发布时间】:2021-10-04 14:55:00
【问题描述】:

我是 react native 的新手。

我的问题很简单:我有带有头像的模态,一些关于当前人物的信息和一些细节,我需要修复模态高度,并且来自 ScrollView 的内容必须是可滚动的,如何修复它?任何建议如何解决?这是我的代码:

        <Modal transparent={true} animationType={'slide'} visible={visible}>
        <StatusBar barStyle={'dark-content'} />
        <View style={[styles.mainContainer, { width: width - 60 }]}>
            <View
                style={[
                    styles.modalContent,
                    { width: width - 50, maxHeight: height - insets.bottom - insets.top - 20 }
                ]}
            >
                <TouchableOpacity onPress={onPressClose}>
                    <Close style={styles.closeButton} width={30} height={30} />
                </TouchableOpacity>
                <View style={styles.modalHeader}>
                    <Avatar.Image
                        style={styles.avatarCollegue}
                        size={90}
                        source={require('../../../assets/images/collegue1.png')}
                    ></Avatar.Image>
                    <View style={styles.infoCollegue}>
                        <Text style={styles.collegueName}>Sandra Vinke</Text>
                        <Text style={styles.collegueJob}>Commerciel Directeur</Text>
                    </View>
                </View>
                <View style={[styles.collegueDetail, { height: height - 50 }]}>

                    <ScrollView style={styles.aboutCollegue}>
                        <View style={{ flex: 1 }}>
                            <Text style={styles.currentUserDetail}>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui sequi voluptates,
                                reprehenderit laborum architecto ex fugiat fugit incidunt aspernatur. Ab corporis
                                laborum dolores at eum asperiores obcaecati ipsa deserunt in? Lorem ipsum dolor sit
                                amet consectetur adipisicing elit. Aperiam cum minus soluta dignissimos eum
                                blanditiis maxime autem, e laborum dolores at eum asperiores obcaecati ipsa deserunt
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui sequi voluptates,
                                reprehenderit laborum architecto ex fugiat fugit incidunt aspernatur. Ab corporis
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui sequi voluptates,
                                reprehenderit laborum architecto ex fugiat fugit incidunt aspernatur. Ab corporis
                                laborum dolores at eum asperiores obcaecati ipsa deserunt in? Lorem ipsum dolor sit
                                amet consectetur adipisicing elit. Aperiam cum minus soluta dignissimos eum
                                blanditiis maxime autem, e laborum dolores at eum asperiores obcaecati ipsa deserunt
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui sequi voluptates, Lorem
                                ipsum dolor sit amet consectetur adipisicing elit. Qui sequi voluptates,
                                reprehenderit laborum architecto ex fugiat fugit incidunt aspernatur. Ab corporis
                                laborum dolores at eum asperiores obcaecati ipsa deserunt in? Lorem ipsum dolor sit
                                amet consectetur adipisicing elit. Aperiam cum minus soluta dignissimos eum
                                blanditiis maxime autem, e laborum dolores at eum asperiores obcaecati ipsa deserunt
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui sequi voluptates, Lorem
                                ipsum dolor sit amet consectetur adipisicing elit. Qui sequi voluptates,
                                reprehenderit laborum architecto ex fugiat fugit incidunt aspernatur. Ab corporis
                                laborum dolores at eum asperiores obcaecati ipsa deserunt in? Lorem ipsum dolor sit
                                amet consectetur adipisicing elit. Aperiam cum minus soluta dignissimos eum
                                blanditiis maxime autem, e laborum dolores at eum asperiores obcaecati ipsa deserunt
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui sequi voluptates,
                            </Text>
                        </View>
                    </ScrollView>
                    <TouchableOpacity style={styles.buttonCollegue}>
                        <View style={styles.emailButtonCollegue}>
                            <Text style={styles.contactCurrentCollegue}>{I18n.t('MYCOLLEGUES.EMAIL_BUTTON')}</Text>
                            <Email width={15} height={15} style={styles.iconButton} />
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    </Modal>

【问题讨论】:

    标签: reactjs react-native react-redux react-hooks


    【解决方案1】:

    这是答案,我修复它

    <ScrollView style={{height: 250}}>
                            <Text style={styles.currentUserDetail}>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui sequi voluptates,
                                reprehenderit laborum architecto ex fugiat fugit incidunt aspernatur. Ab corporis
                                laborum dolores at eum asperiores obcaecati ipsa deserunt in? Lorem ipsum dolor sit amet
                                consectetur adipisicing elit. Aperiam cum minus soluta dignissimos eum blanditiis maxime
                                autem, e laborum dolores at eum asperiores obcaecati ipsa deserunt, Lorem ipsum dolor
                                sit amet consectetur adipisicing elit. Qui sequi voluptates, reprehenderit laborum
                                architecto ex fugiat fugit incidunt aspernatur. Ab corporis laborum dolores at eum
                                asperiores obcaecati ipsa deserunt in? Lorem ipsum dolor sit amet consectetur
                                adipisicing elit. Aperiam cum minus soluta dignissimos eum blanditiis maxime autem, e
                                laborum dolores at eum asperiores obcaecati ipsa deserunt
                            </Text>
                        </ScrollView>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-02-03
      • 2023-02-25
      相关资源
      最近更新 更多