如何修复视图中的日期选择器重叠文本？

Question

我有一个模式，其中有一个日期选择器，后跟 2 个按钮，但是每当我打开日期选择器到 select 来自日历的日期时，按钮隐藏如下：

下面是我写的代码：

 <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 2,
      }}>
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <View
          style={
            width > 414
              ? {
                  backgroundColor: 'white',
                  height: '350px',
                  width: '350px',
                }
              : {
                  backgroundColor: 'white',
                  height: '280px',
                  width: '310px',
                }
          }>
          <Text
            style={{
              fontFamily: 'Roboto',
              fontWeight: 'bold',
              fontSize: 18,
              textAlign: 'center',
              padding: 20,
            }}>
            {name}
          </Text>
          <View
            style={{
              borderBottomColor: '#18D0E4',
              borderBottomWidth: 1,
            }}
          />
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'center',
              marginTop: '5%',

              padding: 20,
              alignItems: 'center',
            }}>
            <View
              style={{justifyContent: 'space-evenly', flexDirection: 'row'}}>
              {reminder == 6 && toggle == 6 ? (
                <TouchableOpacity style={{flexDirection: 'row'}}>
                  <Image
                    source={Images.circle}
                    style={{
                      height: 15,
                      width: 15,
                      marginTop: '2%',
                      paddingRight: '1%',
                    }}
                  />
                  <Text
                    style={{
                      fontFamily: 'Roboto',
                      fontSize: 17,
                      color: '#000',
                      marginLeft: 5,
                    }}>
                    Set Different {'\n'}reminder
                  </Text>
                </TouchableOpacity>
              ) : (
                <TouchableOpacity
                  style={{flexDirection: 'row'}}
                  onPress={() => reminderSet()}>
                  <Image
                    source={Images.circle_o}
                    style={{
                      height: 15,
                      width: 15,
                      marginTop: '2%',
                      paddingRight: '1%',
                    }}
                  />
                  <Text
                    style={{
                      fontFamily: 'Roboto',
                      fontSize: 17,
                      marginLeft: 5,
                      color: '#000',
                    }}>
                    Set Different {'\n'}reminder
                  </Text>
                </TouchableOpacity>
              )}
              {vaccinatedOn == 1 && toggle == 1 ? (
                <TouchableOpacity style={{flexDirection: 'row'}}>
                  <Image
                    source={Images.circle}
                    style={{
                      height: 15,
                      width: 15,
                      marginTop: '2%',
                      // paddingRight: '1%',
                    }}
                  />
                  <Text
                    style={{
                      fontFamily: 'Roboto',
                      fontSize: 17,
                      marginLeft: 5,
                      color: '#000',
                    }}>
                    Vaccinated on
                  </Text>
                </TouchableOpacity>
              ) : (
                <TouchableOpacity
                  style={{flexDirection: 'row'}}
                  onPress={() => vaccinationSet()}>
                  <Image
                    source={Images.circle_o}
                    style={{
                      height: 15,
                      width: 15,
                      marginTop: '2%',
                      // paddingRight: '1%',
                    }}
                  />
                  <Text
                    style={{
                      fontFamily: 'Roboto',
                      fontSize: 17,
                      marginLeft: 5,
                      color: '#000',
                    }}>
                    Vaccinated on
                  </Text>
                </TouchableOpacity>
              )}
            </View>
          </View>
          <View
            style={{
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <DatePicker selected={date} onChange={(date) => setDate(date)} />
          </View>
        </View>
      </View>
      <View
        style={{
          flexDirection: 'row',
          backgroundColor: '#fff',
          alignItems: 'center',
          justifyContent: 'center',
          width: '82%',
          position: 'absolute',
          top: '80%',
        }}>
        <TouchableOpacity
          style={{
            flex: 1,
            borderTopColor: '#C0C0C0',
            borderTopWidth: 1,
            borderRightColor: '#C0C0C0',
            borderRightWidth: 1,
            justifyContent: 'center',
            alignItems: 'center',
            padding: 10,
          }}
          onPress={() => navigation.goBack()}>
          <Text
            style={{
              fontFamily: 'Roboto',
              fontSize: 17,
              fontWeight: 'bold',
              color: '#000',
            }}>
            Cancel
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={{
            flex: 1,
            borderTopColor: '#C0C0C0',
            borderTopWidth: 1,
            borderLeftColor: '#C0C0C0',
            borderLeftWidth: 1,
            justifyContent: 'center',
            alignItems: 'center',
            padding: 10,
          }}
          onPress={() => SaveData(id)}>
          <Text
            style={{
              fontFamily: 'Roboto',
              fontSize: 17,
              fontWeight: 'bold',
              color: '#000',
            }}>
            OK
          </Text>
        </TouchableOpacity>
      </View>
    </View>

请告诉我哪里出了问题以及如何解决？任何帮助将不胜感激。

Answer 1

这是因为您在日期选择器容器之后放置了带有绝对属性的按钮容器，所以它会在它之后呈现。将它放在 DatePicker 容器之前，这样它就不会重叠

如何修复视图中的日期选择器重叠文本？

How to fix date picker overlapping text in view?

reactjs

react-native

react-native-android

react-native-ios