Javascript 如何在react native中调整屏幕不同位置上的单个组件？

嘿！我是新来的。基本上，我有一个表单，其中三个字段使用月份选择器组件，该组件在点击图标时打开，当图标打开时，我在字段中固定了该图标，该图标依赖于一个图标

如果单击第二个或第三个图标，则月份选择器位置将保持在第一个

格式代码

<View style={styles.formWrapper} >
                        <View style={styles.titleField} >
                            <Text style={styles.titleFieldText} >Year Opened</Text>
                        </View>
                        <View style={styles.dobregisterFormWrapperText} >
                            <TextInput
                                placeholder="4/2/2021"
                                defaultValue={dob.toString()}
                                style={styles.dobregisterInputStyleText}
                            />
                            <TouchableOpacity onPress={showDatePicker} >
                                <CalendarLogo style={styles.CalendarLogoColor} />
                            </TouchableOpacity>
                        </View>
                        <View style={styles.dobregisterFormWrapperText} >
                            <TextInput
                                placeholder="Card Limit"
                                style={styles.dobregisterInputStyleText}
                                onChangeText={cardLimit => setCardLimit(cardLimit)}
                                defaultValue={cardLimit}
                                keyboardType='numeric'
                            />
                        </View>
                        <View style={styles.dobregisterFormWrapperText} >
                            <TextInput
                                placeholder="Current Balance"
                                style={styles.dobregisterInputStyleText}
                                onChangeText={cardBal => setCardBal(cardBal)}
                                defaultValue={cardBal}
                                keyboardType='numeric'
                            />
                        </View>
                    </View>
                    <View style={styles.reportingForm} >
                        <View style={styles.titleField} >
                            <Text style={styles.titleFieldText} >Reporting Date</Text>
                        </View>
                        <View style={styles.dobregisterFormWrapperText} >
                            <TextInput
                                placeholder="4/2/2021"
                                defaultValue={dob.toString()}
                                style={styles.dobregisterInputStyleText}
                            />
                            <TouchableOpacity onPress={showDatePicker} >
                                <CalendarLogo style={styles.CalendarLogoColor} />
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={styles.reportingForm} >
                        <View style={styles.mainViewForSlots} >
                            <View style={styles.titleField} >
                                <Text style={styles.titleFieldText} >Available Slots</Text>
                            </View>
                            <TouchableOpacity style={styles.titleField} onPress={addField} >
                                <Text style={styles.titleFieldSlotText} >Add another Slots</Text>
                            </TouchableOpacity>
                        </View>
                        <View style={styles.dobregisterFormWrapperText} >
                            <TextInput
                                placeholder="4/2/2021"
                                defaultValue={dob.toString()}
                                style={styles.dobregisterInputStyleText}
                            />
                            <TouchableOpacity onPress={showDatePicker} >
                                <CalendarLogo style={styles.CalendarLogoColor} />
                            </TouchableOpacity>
                        </View>
                        {  field  }
                       
                    </View>
                    

现在在我的styles

top中：hp（'52%）

正在调整我需要显示月份选择器的位置，但我如何动态设置它，以便如果我单击第一个图标，它会显示在该图标下方，如果我单击第二个图标，它会显示在该图标下方，第三个图标也是一样的

                    {isDatePickerVisible === true ?
                        <View style={styles.calendarWrapper} >
                            <MyMonthPicker/>
                        </View>
                        :
                        null
           
         }

    calendarWrapper:{
        width:wp('83%'),
        marginLeft:wp('10%'),
        borderRadius:10,
        borderWidth:1,
        borderColor:'grey',
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 3,
        },
        shadowOpacity: 0.29,
        shadowRadius: 4.65,
        elevation: 7,
        position:'absolute',
        top:hp('52%'), // adjustment
        zIndex:99
    },