React Native：你如何實現DatePickerAndroid？

Question

根據RN文檔，您必須調用異步/等待函數才能打開Android日期選擇器。我試着安裝異步到發電機轉化巴貝爾預設並增加了.babelrc文件，

{ "plugins": ["transform-async-to-generator"] }

但這似乎只是拋出一個意外的標記錯誤添加使用標籤（例如<圖像的任何RN組件時。 .. />會拋出和意外的令牌錯誤）。這是我的功能打開Android日期選取器看起來像

async openAndroidDatePicker: function() { 
    try { 
    const {action, year, month, day} = await DatePickerAndroid.open({ 
     date: new Date() 
    }); 
    } catch ({code, message}) { 
    console.warn('Cannot open date picker', message); 
    } 
} 

Answer 1

解決。我的函數的語法錯了...這是對我工作：

async openAndroidDatePicker() { 
    try { 
    const {action, year, month, day} = await DatePickerAndroid.open({ 
     date: new Date() 
    }); 
    } catch ({code, message}) { 
    console.warn('Cannot open date picker', message); 
    } 
} 

記住我使用createClass這個例子，不是ES6類。

Answer 2

我在我的應用程序中使用日期選擇器android的庫。 對於使用範例：

'use-strict'; 

import React, {Component} from 'react' 
import{ 
    StyleSheet, 
    View, 
    Text, 
    Image, 
    TextInput, 
    Dimensions, 

}from 'react-native'; 

import DatePicker from 'react-native-datepicker'; 
var {width,height} = Dimensions.get('window'); 

class Booking extends Component{ 

    constructor(props) { 
    super(props); 
    this.state = { 

    date_in: '2016-05-01', 
    date_out: '2016-05-01', 

}; 
} 

render(){ 

return(
    <View> 

    <Text style={{fontSize:18, marginLeft:10, marginTop:10}}>Arrival/Departure:</Text> 

    <DatePicker 
     style ={{padding:10}} 
     date={this.state.date_in} 
     mode="date" 
     format="YYYY-MM-DD" 
     minDate="2016-05-01" 
     maxDate="2016-06-01" 
     showIcon={false} 
     customStyles={{ 
     dateInput: { 
      alignItems : 'flex-start', 
      padding:5 
     }, 
    }} 
    onDateChange={(date_in) => {this.setState({date_in: date_in});}}/> 

    </View> 
); 
} 
} 


var styles = StyleSheet.create({ 

    picker: { 
    width: 100, 
    }, 
}); 

module.exports = Booking; 

有關詳細信息，你可以看看這裏：

Date picker react native

希望這有助於你:)