TextInput'a dokunduğunda Klavye ve/veya DatePickerIOS Native

Question

React Native uygulamasında yeniyim ve sadece bir TextInput öğesine dokunulduğunda ekranın altından bir DatePickerIOS bileşeninin yukarı kaydırılmasını istiyorum.

Lütfen birisi bana doğru yönde işaret edebilir mi veya bana basit bir örnek verebilir mi?

Bileşenim aşağıda. O çok basit. Kullanıcı TextInput'a dokunduktan sonra açmak için klavye veya DatePickerIOS almaya çalışıyorum. Ben DatePickerIOS kullanıyorum

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

, burada ben bunu nasıl örneğidir:

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; 

Eğer TouchableOpacity bastığınızda tekrar basarsanız, datepicker bunu göstermek için bayrak tetikler çünkü gösterecek ve , kapanacak. Aynı zamanda anı yazdırmak için de kullanıyorum, çünkü ben metin bileşeninde nesne koyamıyorum hata alıyordum. Bu örnek için anı yüklemeniz gerekir, bunu şu şekilde yapabilirsiniz: npm install moment --save, Kodda zaten kullandım Yukarıdaki örnekte, numaralı yazıda var moment = require('moment') ve tekrar yazdırma tarihini görebilirsiniz. Eğer onu kurmak/kullanmak istemiyorsanız, sadece benim örneğimdeki satırları kaldırın - ancak tarihiniz o zaman basılmayacaktır. Klavyeyi tetiklemesi gerektiğinden, TextInput ile tarih seçicisini nasıl arayacağımı bilmiyorum ve tarih seçtiğim zaman gerçekten klavyeye ihtiyacım yok. Umarım yardımcı olur :)