0

我正在做一个带有可折叠内容的模式，但我希望内容显示在菜单上方，我阅读了文档并发现“expandFromBottom --- 从底部而不是顶部展开内容”但无法使其工作.

这是我的模态

<Modal
        animationType="fade"
        transparent={true}
        // presentationStyle="overFullScreen"
        visible={showReminderModal}>

            <View style={{ flex:1, backgroundColor:'rgba(0,0,0,0.5)', justifyContent:'center', alignContent:'center' }}>

                <View style={{ backgroundColor:'#FFF', flexDirection:'column', justifyContent:'space-between', borderRadius:20, margin:10, overflow:'hidden' }}>

                  <TouchableOpacity style={{ justifyContent:'flex-end', alignSelf:'flex-end', padding:20 }} onPress={() => closeReminderModal()}>
                    <Icon name="close" size={20} color="#777" />
                  </TouchableOpacity>
                  
                  <View style={{ flexDirection:'row', justifyContent:'center', alignContent:'center', paddingHorizontal:20 }}>
                      {returnCategoryIcon(selectedRecommendation?.type)}
                  </View>

                  <View style={{ padding:10, flexDirection:'row', justifyContent:'center', alignContent:'center', paddingHorizontal:20  }}>
                      <Text style={{ fontWeight:'bold', fontSize:20, fontFamily:'Sofia Pro' }}>{selectedRecommendation?.title}</Text>
                  </View>

                  <View style={{ padding:5, flexDirection:'row', justifyContent:'center', alignContent:'center', paddingHorizontal:20, marginBottom:20  }}>
                      <Text style={{ fontSize:14, fontFamily:'inter-regular', lineHeight:20, letterSpacing:0.4 }}>{selectedRecommendation?.action}</Text>
                  </View>

                  

                  <TouchableOpacity onPress={() => setIsCollapsed(!isCollapsed)} style={{ padding:5, flexDirection:'column', justifyContent:'center', alignItems:'center', paddingHorizontal:20, marginBottom:20  }}>
                      <Text style={{ fontSize:14, textTransform:'uppercase', color:'#E767FF', fontWeight:'400', fontFamily:'inter-regular', letterSpacing: 2 }}>Why its important</Text>
                      <Icon name="down" size={20} color="#E767FF" />
                  </TouchableOpacity>

                  <Collapsible collapsed={isCollapsed}
                  
                  style={{ paddingTop: 5, paddingHorizontal:20, paddingBottom:10 }}>
                    <View>
                        <Text style={{ fontSize:14, fontFamily:'inter-regular', lineHeight:20, letterSpacing:0.4 }}>{selectedRecommendation?.learn_more}</Text>
                    </View>
                  </Collapsible>
                  
                  <Divider style={{backgroundColor: '#BBB'}} />

                  <View style={{ flexDirection:'row', justifyContent:'space-between' }}>
                    <TouchableOpacity style={{ flex:1, padding:15, justifyContent:'center', alignContent:'center', backgroundColor:'#FFF' }} onPress={() => closeReminderModal()}>
                      <Text style={{ textAlign:'center', color:'#533AED', fontWeight:'400', letterSpacing: 2 }}>SOUNDS GOOD!</Text>
                    </TouchableOpacity>
                    {/* <TouchableOpacity style={{ flex:1, padding:15, backgroundColor:'#533AED', justifyContent:'center', alignContent:'center' }} onPress={() => openReminderScheduleModal(true)}>
                      <Text style={{ textAlign:'center', color:'#FFF', fontWeight:'bold' }}>Set a Reminder</Text>
                    </TouchableOpacity> */}
                     <TouchableOpacity style={{ flex: 1, padding: 15, height: 50,  backgroundColor: '#533AED', justifyContent: 'center', alignContent: 'center' }} onPress={() => goToHabits()}>
                      <Text style={{ textAlign: 'center', color: '#FFF', fontWeight: '400', letterSpacing: 2 }}>
                        MAKE A HABIT
                      </Text>
                    </TouchableOpacity>
                  </View>

                </View>

            </View>
         
      </Modal>

更具体地说，这里是我要编辑的可折叠

<TouchableOpacity onPress={() => setIsCollapsed(!isCollapsed)} style={{ padding:5, flexDirection:'column', justifyContent:'center', alignItems:'center', paddingHorizontal:20, marginBottom:20  }}>
                      <Text style={{ fontSize:14, textTransform:'uppercase', color:'#E767FF', fontWeight:'400', fontFamily:'inter-regular', letterSpacing: 2 }}>Why its important</Text>
                      <Icon name="down" size={20} color="#E767FF" />
                  </TouchableOpacity>

                  <Collapsible collapsed={isCollapsed}
                  
                  style={{ paddingTop: 5, paddingHorizontal:20, paddingBottom:10 }}>
                    <View>
                        <Text style={{ fontSize:14, fontFamily:'inter-regular', lineHeight:20, letterSpacing:0.4 }}>{selectedRecommendation?.learn_more}</Text>
                    </View>
                  </Collapsible>

如何使文本出现在按钮上方？

谢谢

4

0 回答 0