javascript - 如何在本机反应中调整屏幕不同位置的单个组件？

Question

嗨！我是反应原生的新手。基本上，我有一个表单，其中三个字段正在使用月份选择器组件，该组件在点击打开时在该字段中固定的图标时打开取决于一个图标。

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

形式代码

<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>
                    

**monthPicker显示代码**

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

月份选择器的 calendarWrapper 样式

    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
    },

现在在我的风格top:hp('52%')中正在调整一个我需要显示月份选择器的位置，但是我如何动态设置它，以便如果我点击第一个图标，它会显示在该图标下方，如果我点击第二个图标，它会显示在该图标下方，同样适用第三？

标签： javascriptandroidreactjsreact-native