2017-06-20 13 views
1

React NativeでDatePickerAndroidを使用しようとしています。次のようにReactネイティブDatePickerAndroidの使い方

DE関数は、次のように

showAndroidDatePicker = async() => { 
     try { 
      const {action, year, month, day} = await DatePickerAndroid.open({ 
       date: this.state.selectedValue 
      }); 
      if (action !== DatePickerAndroid.dismissedAction) { 
       var date = new Date(year, month, day); 
       this.setState({selectedValue: date.toLocaleDateString()}); 
      } 
     } catch ({code, message}) { 
      console.warn('Cannot open date picker', message); 
     } 
    }; 

render機能は次のとおりです。次のように

render() { 
     let numbers = []; 
     for(var i=0; i<=this.props.max; i++) numbers.push((i + '')); 
     return (
      <View> 
       {this.renderModal()} 
       <ItemDetail selectItem={this.selectItem.bind(this)} resetItem={this.resetItem.bind(this)} title={this.props.title} value={formatDate(this.props.value)} icon={this.props.icon} /> 
      </View> 
     ) 
    } 

そしてモーダル機能をレンダリングするには、次のとおりです。

renderModal() { 
     if(!this.state.itemPickerVisible) return; 

     let datePicker = <DatePickerIOS date={this.state.selectedValue} mode="date" timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60} onDateChange={(date) => { this.setState({selectedValue: date})}} />; 
     if (Platform.OS === "android"){ 
      datePicker = this.showAndroidDatePicker() 
     } 

     return(
      <Modal animationType="fade" transparent={true} visible={this.state.itemPickerVisible}> 
       <View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-end'}}> 
        <View style={{flex: 1, backgroundColor: '#000', opacity: 0.4}}> 
        </View> 
        <View style={{backgroundColor: '#fff'}}> 
         <View style={{backgroundColor: '#ddd', flexDirection: 'row', justifyContent: 'space-between', padding: 7}}> 
          <Text style={{padding: 4}}>{this.props.title}</Text> 
          <TouchableHighlight onPress={this.selectedItem.bind(this)}> 
           <Text style={{padding: 4, color: s.colorDark}}>{gettext("Done")}</Text> 
          </TouchableHighlight> 
         </View> 
         <View>        
          {datePicker} 
         </View> 
        </View> 
       </View> 
      </Modal> 
     ) 
    } 

しかしときrenderModalニーズ表示されるエラー:

enter image description here

答えて

1

Platform.OS === "android"場合は、datePicker変数には、現在何も(実際undefined)、showAndroidDatePickerによって返されるものは何でも含まれていません。プラットフォーム固有のピッカーを表示するには、モーダルの内側に、次を使用することができます。

<View> 
    {Platform.OS === 'ios' ? 
    <DatePickerIOS date={this.state.selectedValue} mode="date" timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60} onDateChange={(date) => { this.setState({selectedValue: date})}} /> : 
    null 
    } 
</View> 

showAndroidDatePicker例えばを呼び出しますcomponentDidMountにあります。

+0

ありがとうございますが、それは私が探していた答えではありません。私はプラットフォーム固有のピッカーを表示する方法を知っていますが、私はアンドロイドピッカーに問題があります。あなたの答えは私の質問の答えではありません。私はandroidPickerの使い方を尋ねましたが、私はここには表示されません。 – Boky

+0

'componentDidMount'から' showAndroidDatePicker'を呼び出そうとしましたか?現在、命令型のコードの結果を宣言型のjsx内で使用しようとしていますが、これはうまくいきません。推奨されるように、 'renderModal'からすべてのアンドロイド関連のものを削除し、コンポーネントマウントでアンドロウピッカーを起動してみてください。それがあなたを得るかどうか私に教えてください – NiFi

+0

私は同じエラーが発生しています!どのように解決しましたか? – Aayushi

関連する問題