如何在按下另一个组件时启动基于本机的日期点击器？

Question

我想在用户按下按钮时强制启动基于本机的DatePicker。

我该怎么办？在文档中找不到任何内容。

在我的例子中，我有条件地渲染选择器。如果选择器已经设置，我只显示按钮...

import React from 'react';

import { Container, Content, Text, Button, DatePicker, Title } from 'native-base';

class Example extends React.Component {

  constructor(props) {
    super(props);
    const now = new Date()
    this.state = { 
        now, 
        chosenDate: now 
    };
  }

  setDate(newDate) {
    this.setState({ chosenDate: newDate });
  }

    callPicker() {
        // what now?
    }

  render() {
    return (
      <Container>
        <Content>

          { 
            this.state.chosenDate== now ?  (
              <Content>
                <DatePicker
                  defaultDate={new Date(2018, 4, 4)}
                  minimumDate={new Date(1960, 1, 1)}
                  maximumDate={new Date(2018, 12, 31)}
                  locale={"en"}
                  timeZoneOffsetInMinutes={undefined}
                  modalTransparent={true}
                  animationType={"fade"}
                  androidMode={"default"}
                  placeHolderText="Select date"
                  textStyle={{ color: "green" }}
                  placeHolderTextStyle={{ color: "#d3d3d3" }}
                  onDateChange={(newDate) => this.setDate(newDate)}
                  disabled={false}
                />
              </Content>
            ) : (
              <Content>
                <Button onPress={callPicker}>
                    <Text>{this.state.chosenDate}</Text>
                </Button>
              </Content>
            )
          }
        </Content>
      </Container>
    );
  }
}

Answer 1

我已经更改了一些代码，删除了你的条件。并添加了您想要的代码，对于基于按钮单击打开DatePicker，我使用了ref来调用DatePicker组件的子方法。

import React from "react";
import {
  Container,
  Content,
  Text,
  Button,
  DatePicker,
  Title
} from "native-base";

const now = new Date();
export default class ScreenOne extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      now,
      chosenDate: now
    };
  }

  setDate(newDate) {
    this.setState({ chosenDate: newDate });
  }

  callPicker() {
    // what now?
    this.refs.datePicker.showDatePicker();//<-----call child method to open calender---
  }

  render() {
    return (
      <Container>
        <Content>
          <Content>
            <DatePicker
              ref="datePicker"//<------reference name------
              defaultDate={new Date(2018, 4, 4)}
              minimumDate={new Date(1960, 1, 1)}
              maximumDate={new Date(2018, 12, 31)}
              locale={"en"}
              timeZoneOffsetInMinutes={undefined}
              modalTransparent={true}
              animationType={"fade"}
              androidMode={"default"}
              placeHolderText="Select date"
              textStyle={{ color: "green" }}
              placeHolderTextStyle={{ color: "#d3d3d3" }}
              onDateChange={newDate => this.setDate(newDate)}
              disabled={false}
            />
          </Content>
          <Content>
            <Button onPress={() => this.callPicker()}>
              <Text>{JSON.stringify(this.state.chosenDate)}</Text>
            </Button>
          </Content>

        </Content>
      </Container>
    );
  }
}