通过单击React Native中的文本打开组件

Question

我想在单击文本时打开日历组件。

<Text onPress={_onPressButton}>Select date</Text>
var _onPressButton = () => {
        return (
             <DatePicker />
        )
    };

更新 ：我在这里找到了答案https://github.com/xgfe/react-native-datepicker/issues/73#issuecomment-278840899

Answer 1

您必须保留对数据选取器组件的引用，并使用日期选取器 ref 调用方法"onPressDate"。

注意：@Nima我是根据您使用的软件包回答这个问题（https://github.com/xgfe/react-native-datepicker）

检查下面的代码段

在构造函数中：

this.startDatePicker = this.updateRef.bind(this, "startDate");

更新引用方法：

updateRef(name, ref) {
        this[name] = ref;
    }

日期选取器组件：

                          <DatePicker
                            showIcon={false}
                            ref={this.startDatePicker}
                            date={this.state.startDate}
                            mode="date"
                            placeholder="select date"
                            format="DD-MM-YYYY"
                            minDate={new Date()}
                            confirmBtnText="Confirm"
                            cancelBtnText="Cancel"
                            onDateChange={date => {
                                global.consoleLogger('the current date selection', date);
                            }}
                        />

单击文本或按钮时调用此方法：

openStartDatePicker = () => {
        this.startDate.onPressDate();
    }

希望这有帮助。

Answer 2

你用什么日期选择器？因为我想它不是来自 react-native 库的 DatePickerAndroid 或 DatePickerIOS。我认为您使用了反应本机日期选择器。它会在视图中创建新组件，因此不确定您是否能够从其他位置（在文本单击时）打开它。在我看来，React Native Picker更好，因为有方法Picker.show（），所以你可以在文本上显示它。

文档链接：https://github.com/beefe/react-native-picker*

你必须使用数组中传递的适当数据来初始化选择器。

const initPicker = ( onConfirm, onCancel, dateFrom, dateTo ) => {
  Picker.init({
    pickerData: createLastDates(dateFrom, dateTo),
    pickerConfirmBtnText: "Confirm",
    pickerCancelBtnText: "Cancel",
    pickerTitleText: '',
    pickerConfirmBtnColor: [255, 0, 0, 1],
    pickerCancelBtnColor: [150, 150, 150, 1],
    pickerBg: [255, 255, 255, 1],
    pickerToolBarBg: [200, 200, 200, 1],
    onPickerConfirm: onConfirm,
    onPickerCancel: onCancel,
  });
};

然后在第一次单击时，您必须使用此函数初始化选取器，然后使用 Picker.show（） 显示选取器;

Answer 3

<Text
 onPress={() => {this.onPressDate()}}>
 Your Text
</Text>