react-native-modal的响应高度，根据其中的元素数量

Question

我正在尝试在react原生应用程序中创建一个模式，屏幕上有一个按钮或可触摸的不透明度来切换模式，我正在尝试通过使用映射来填充模式上的项目列表。但它并没有像预期的那样工作，因为我创建的元素隐藏在其他元素后面。

我试过使用react原生的Modal，但我无法设置模式的自定义大小，因为我需要它的某些部分是透明的。这就是为什么我转到了react-native- moved库，但我在这方面面临着上面提到的错误。

<Modal isVisible={this.state.modalVisible} >
                    <View style={{backgroundColor:'white', alignItems:'center', borderRadius:5}}>
                        <Image source={require('../../assets/Group3Copy.png')} style={{marginTop:responsiveFontSize, marginBottom:responsiveFontSize-2}}/>
                        <Text style={{color:'#92c848', alignSelf:'center', fontWeight:'bold', fontSize:responsiveFontSize+10}}>Well Done!</Text>
                        <Text style={{color:blueColor, fontWeight:'bold'}}>{this.state.plantCount} plants have been planted</Text>
                        <Text style={{color:blueColor, fontWeight:'bold'}}> {this.state.plantCount} پودے لگاۓ گۓ ہيں </Text>


                        {/* Mapping=========================================== */}

                        <View style={AppStyles.mainNoRow}>
                        <View style={AppStyles.colNoIco}>
                            <Image source={require('../../assets/plant.png')}/>
                        </View>
                        <View style={AppStyles.colOrderNoDetail}>
                            <Text style={{color:"#006f91", alignSelf:'flex-start', fontWeight:'bold',marginTop:10}}>Plant</Text>
                            <Text style={{color:"#747474", alignSelf:'flex-start', fontWeight:'bold',}}>Id</Text>
                        </View>

                        <View style={AppStyles.colOrderPickupYesDetail}>
                            <Text style={{color:greenColor ,fontWeight:'bold',}}>1 Jan 19</Text>
                            <Image source={require('../../assets/address.png')}/>
                        </View>
                    </View>



                       <TouchableOpacity onPress={this._toggleModal}
                        style={{
                        width: "90%",
                        height: 60,
                        justifyContent: "center",
                        alignSelf: "center",
                        borderWidth: 1,
                        borderRadius: 8,
                        borderColor: blueColor,
                        shadowColor: blueColor,
                        shadowOffset: { width: 0, height: 1 },
                        shadowOpacity: 0.9,
                        shadowRadius: 1,
                        backgroundColor: blueColor,
                        marginBottom:responsiveFontSize}} >
                        <Text style={AppStyles.textStylePlant}>OK</Text>

                        </TouchableOpacity>
                    </View>

                </Modal>

我希望它的高度是根据其上映射的元素的数量来设置的。并在可能的情况下自动调整。但是现在元素是重叠的，如图所示。https://i.imgur.com/jH9sBxV.png元素隐藏在“OK”按钮后面。

Answer 1

将marginBottom添加到主行的样式中似乎可以解决这个问题。它还相应地调整了modal的高度。