在 React Native 中触摸 TextInput 时打开键盘 and/or DatePickerIOS

Question

我是 React Native 的新手，我只是想在触摸 TextInput 时让 DatePickerIOS 组件从屏幕底部向上滑动。

有人能给我指出正确的方向或给我一个简单的例子吗？

下面是我的组件。这很简单。我试图在用户触摸 TextInput 时打开键盘或 DatePickerIOS。

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  TextInput,
  View,
  DatePickerIOS
} from 'react-native';

class AddChildVisit extends Component {

render() {
  return (
    <View>
      <Text>Visit Date</Text>
      <TextInput
        style={{height: 40, width: 300, padding: 4, borderColor: 'gray', borderWidth: 1}}
        keyboardType= 'numeric'
      />
      <DatePickerIOS
        date={new Date()}
        mode="date"
      />
    </View>
  );
 }


}


module.exports = AddChildVisit;

Answer 1

我正在使用 DatePickerIOS，这是我将如何操作的示例：

import React, {
    AppRegistry,
    Component,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    View,
    DatePickerIOS
} from "react-native";

var moment = require('moment');

class AddChildVisit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            date: new Date(),
            showDatePicker: false 
        }
    }

    render() {
        var showDatePicker = this.state.showDatePicker ?
            <DatePickerIOS
                style={{ height: 150 }}
                date={this.state.date} onDateChange={(date)=>this.setState({date})}
                mode="date"/> : <View />
        return (
            <View>
                <Text>Visit Date</Text>
                <TouchableOpacity style={{height: 40, width: 300, padding: 4, borderColor: 'gray', borderWidth: 1}}
                                  onPress={() => this.setState({showDatePicker: !this.state.showDatePicker})}>
                    <Text>{moment(this.state.date).format('DD/MM/YYYY')}</Text>
                </TouchableOpacity>
                {showDatePicker}
            </View>
        );
    }


}

module.exports = AddChildVisit;

当你按下TouchableOpacity时，datepicker会显示，因为你触发了flag来显示它，如果你再按它，它就会关闭。我还使用 moment 来打印日期，因为我遇到错误，无法将对象放入文本组件等。要使此示例正常工作，您需要安装 moment，您可以这样做： npm install moment --save ，我已经在上面的代码示例中使用它，您可以看到 var moment = require('moment')，并再次在文本中打印日期 {moment(this.state.date).format('DD/MM/YYYY')}。如果您不想 install/use 它，只需从我的示例中删除带有 moment 的行 - 但您的日期将不会被打印出来。我不太确定如何使用 TextInput 调用日期选择器，因为它必须触发键盘，而当我有日期选择器时，我真的不需要键盘。希望对您有所帮助:)

Answer 2

另一种方法是使用包 react-native-datepicker 并在两个平台上工作 Android/iOS https://www.npmjs.com/package/react-native-datepicker

在 React Native 中触摸 TextInput 时打开键盘 and/or DatePickerIOS

Open Keyboard and/or DatePickerIOS when TextInput touched in React Native

javascript

event-handling

dom-events

react-native