反应原生：按下 TouchableOpacity 并在中间正方形内显示时间时出现问题

Question

当我尝试按下 TouchableOpacity 按钮时出现了一些问题，因为它不允许我按下它，而且在我按下它之后，我需要查看时间选择器并根据需要选择一个时间，并且它应该显示在广场内在中间查看。 怎么办呢，因为我现在被堆了。

我添加屏幕图片：

import React, { useState } from 'react';
import { Text, View, Button, Platform, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { useRoute, useNavigation } from '@react-navigation/native';
import DateTimePicker from '@react-native-community/datetimepicker';
import Icon from 'react-native-ionicons';

function NetuneyDigum() {
  const [date, setDate] = useState(new Date());
  const [mode, setMode] = useState('time');
  const [show, setShow] = useState(false);

  const onChange = (event, selectedDate) => {
    setShow(Platform.OS === 'ios');
  };

  const showMode = (currentMode) => {
    setShow(true);
    setMode(currentMode);
  };

  const showTimepicker = () => {
    showMode('time');
  };
  return (
    <>
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          backgroundColor: '#cbced4',
        }}
      >
        <View
          style={{
            paddingTop: 30,
            flexDirection: 'row',
            justifyContent: 'space-evenly',
            paddingRight: 50,
            right: 30,
          }}
        >
          <View
            style={{
              alignItems: 'center',
              flexDirection: 'row',
              justifyContent: 'space-evenly',
              paddingRight: 10,
            }}
          >
            <Text style={{ fontWeight: 'bold', fontSize: 18, color: 'black' }}>
              THE TIME IS :
            </Text>
          </View>
          <View
            style={{
              height: 50,
              width: 100,
              borderRadius: 5,
              borderColor: 'black',
              borderWidth: 2,
              justifyContent: 'center',
              alignItems: 'center',
              flexDirection: 'row',
              // left: 40,
            }}
          >
            <Text
              style={{
                fontSize: 20,
                fontWeight: 'bold',
                color: '#368fc7',
                paddingLeft: 10,
              }}
            >
              {show}
            </Text>
            <TouchableOpacity
              onPress={showTimepicker}
              style={{
                height: 60,
                width: 60,
                borderRadius: 5,
                borderColor: 'black',
                borderWidth: 2,
                left: 100,
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              <Icon name="md-time" size={50} color="black" />
            </TouchableOpacity>
          </View>
        </View>

        {show && (
          <DateTimePicker
            testID="dateTimePicker"
            value={date}
            mode={mode}
            is24Hour={true}
            display="default"
            onChange={onChange}
          />
        )}
      </View>
    </>
  );
}

Answer 1

您在代码中的 TouchableOpacity 位置错误，样式设置错误，将 left 属性设置为零并将您的 TouchableOpacity 移到当前父级之外

<View
      style={{
        paddingTop: 30,
        flexDirection: 'row',
        justifyContent: 'space-evenly',
        paddingRight: 50,
        right: 30,
      }}
    >
      <View
        style={{
          alignItems: 'center',
          flexDirection: 'row',
          justifyContent: 'space-evenly',
          paddingRight: 10,
        }}
      >
        <Text style={{ fontWeight: 'bold', fontSize: 18, color: 'black' }}>
          THE TIME IS :
        </Text>
      </View>
      <View
        style={{
          height: 50,
          width: 100,
          borderRadius: 5,
          borderColor: 'black',
          borderWidth: 2,
          justifyContent: 'center',
          alignItems: 'center',
          flexDirection: 'row',
          // left: 40,
        }}
      >
        <Text
          style={{
            fontSize: 20,
            fontWeight: 'bold',
            color: '#368fc7',
            paddingLeft: 10,
          }}
        >
          {show}
        </Text>
      </View>
    //move touchable opacity here
    <TouchableOpacity
          onPress={showTimepicker}
          style={{
            height: 60,
            width: 60,
            borderRadius: 5,
            borderColor: 'black',
            borderWidth: 2,
            //left: 100, remove this line
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Icon name="md-time" size={50} color="black" />
        </TouchableOpacity>
    </View>