Question

我正在使用基于本机的datepicker，并且想从组件外部调用ShowDatePicker方法。应该是这样的东西，除了：

This.DatePicker不存在
我不知道该方法是否公开，或者如何实现。.

我认为这与使用引用有关吗？

谢谢！

[m M M; m X M; m m M]

DatePicker源代码：https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/DatePicker.js

Answer 1

好吧，如果您不得不像其他答案一样引用它，如下所示

<Content>
  <Button onPress={this.DatePicker.showDatePicker}>
  <DatePicker ref={ref => this.DatePicker = ref } {...this.props}/>
</Content>

但是，除非DatePicker组件将道具设为ref，否则这将无法解决您的问题。简而言之，即使您在组件中执行此操作，也将无法访问showDatePicker。可以尝试通过两种方式进行操作（假设您尝试在单击按钮时隐藏组件），而不是尝试这样做。选项1：使用道具showDatePicker，它将显示隐藏组件。例如，

<Content>
  <Button onPress={this.setState({showHide: !this.state.showHide})}>
  <DatePicker showDatePicker={this.state.showHide}  {...this.props} />
</Content>

然后在DatePicker中使用此道具执行一些逻辑。或选项2 使用条件运算符显示隐藏整个组件。 w 例如，

<Content>
  <Button onPress={this.setState({showHide: !this.state.showHide})}>
  {this.state.showHide && <DatePicker {...this.props} />}
</Content>

如果您要做其他事情，请告诉我，我会更新答案。

编辑：在gist.github.com/fotoflo/13b9dcf2a078ff49abaf7dccd040e179中查看您的代码，我知道您正在尝试执行的操作。简而言之，您试图单击按钮显示日期选择器。不幸的是，目前来看Nativebase - how to show datepicker when clicking input?和文档https://docs.nativebase.io/Components.html#date-picker-def-headref，这是不可能的。如果您真的想拥有它，则应考虑以下可能的解决方案，选项1：使用分叉native-base进行操作并使用日期选择器，甚至将PR提交给native-base以供将来使用。选项2：您可以将任何第三方库用于例如https://www.npmjs.com/package/react-native-modal-datetime-picker。或我最喜欢的选项3：

import { TouchableOpacity, Text, Modal, View, Platform, DatePickerIOS, DatePickerAndroid } from 'react-native';

state = {
      currentDate: date,
      showiOSDatePicker: false,
      chosenDate: date,
      formattedDate
}

showDatePicker = async () => {
    if (Platform.OS === 'ios') {
      this.setState({
        showiOSDatePicker: true
      });
    } else {
      const { chosenDate, currentDate } = this.state;
      try {
        const {action, year, month, day} = await DatePickerAndroid.open({
          date: chosenDate,
          maxDate: currentDate
        });
        if (action !== DatePickerAndroid.dismissedAction) {
          const dateSelected = new Date(year, month, day);
          const formattedDate = this.getFormattedDate(dateSelected)
          this.setState({chosenDate: dateSelected, formattedDate});
          console.log(formattedDate)
        }
      } catch ({code, message}) {
        console.warn('Cannot open date picker', message);
      }
    }
  }

render() {
const { showiOSDatePicker } = this.state;
  return (
    <View>
       {showiOSDatePicker &&
          <Modal
            animationType="fade"
            transparent
            visible={showiOSDatePicker}
            onRequestClose={() => {
              Alert.alert('Modal has been closed.');
          }}>
            <View
              style={{
                display: 'flex',
                flex: 1,
                justifyContent: 'center'
              }}
            >
              <View style={{
                margin: 22,
                backgroundColor: 'rgba(240,240,240,1)'
              }}>
                <View
                  style={{
                    borderBottomColor: 'rgba(87,191,229,1)',
                    borderBottomWidth: 2,
                    display: 'flex',
                    justifyContent: 'center',
                    height: 70,
                    paddingRight: 20
                  }}
                >
                  <Text style={{
                    color: 'rgba(40,176,226,1)',
                    fontSize: 20,
                    paddingLeft: 20
                  }}>
                    {formattedDate}
                  </Text>
                </View>
                <DatePickerIOS
                  date={chosenDate}
                  onDateChange={this.setDate}
                  maximumDate={currentDate}
                  mode="date"
                />
                <TouchableOpacity
                  style={{
                    borderTopColor: 'rgba(220,220,220,1)',
                    borderTopWidth: 1,
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    height: 50
                  }}
                  onPress={this.onCloseDatePicker}
                >
                  <Text>
                    Done
                  </Text>
                </TouchableOpacity>
              </View>
            </View>
          </Modal>
        }
        <TouchableOpacity onPress={this.showDatePicker}>
          <Text>Show Date</Text>
        </TouchableOpacity>

    </View>

  );

}

让我知道这是否有意义，否则我将在https://snack.expo.io/中汇总一个可行的示例干杯

Answer 2

您必须给DatePicker提供参考

<Content>
  <Button onPress={this.DatePicker.showDatePicker}>
  <DatePicker ref={ref => this.DatePicker = ref } props}/>
</Content>

Answer 3

我遇到了同样的问题，这是我的解决方案：

NativeBase DatePicker：

 <DatePicker
              defaultDate={new Date(2018, 4, 4)}
              minimumDate={new Date(2018, 1, 1)}
              maximumDate={new Date(2020, 12, 31)}
              locale={"es"}
              timeZoneOffsetInMinutes={undefined}
              modalTransparent={true}
              animationType={"fade"}
              androidMode={"default"}
              placeHolderText="Select date"
              textStyle={{ color: "green" }}
              placeHolderTextStyle={{ color: "#d3d3d3" }}
              onDateChange={this.setDate.bind(this)}
              disabled={false}
              ref={c => this._datePicker = (c) } 
            />

与此同时，您可以打开datePicker：

 <Button onPress={()=>{ this._datePicker.setState({modalVisible:true})}}>
   <Text>
  showDatePicker
  </Text>
</Button>

我希望对您有帮助

如何调用组件的方法

3 个答案: