#javascript #reactjs #react-native #datepicker #react-hooks
#javascript #reactjs #react-native #выбор даты #реагирующие крючки
Вопрос:
при попытке нажать кнопку 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 amp;amp; (
<DateTimePicker
testID="dateTimePicker"
value={date}
mode={mode}
is24Hour={true}
display="default"
onChange={onChange}
/>
)}
</View>
</>
);
}
Комментарии:
1. вы неправильно указали позицию TouchableOpacity в коде и неправильно выполнили стилизацию, установите левый атрибут равным нулю и переместите свой TouchableOpacity за пределы текущего родительского элемента
2. можете ли вы показать мне свою идею, чтобы исправить это в моем коде, пожалуйста?
3. это трудно прочитать из-за его стиля текста, можете ли вы написать такой код, как в моем примере?
4. хорошо, я изменил связанную часть вашего кода и отправил ответ
Ответ №1:
вы неправильно указали позицию TouchableOpacity в коде и неправильно выполнили стилизацию, установите левый атрибут равным нулю и переместите свой 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>
Комментарии:
1. хорошо, но после того, как я выберу время, почему я не вижу его в среднем квадрате?
2. DateTimePicker имеет параметр onChange, который возвращает выбранное значение, в методе onChange вы должны установить дату (selectedDate) и написать {date} вместо {show} в вашем <Text>
3. извините, мне нужно только установить время сейчас, когда я нажимаю кнопку, мне не нужен инструмент выбора, просто отображающий текущее время при каждом нажатии.