通过单击本机中的文本来打开组件

时间:2017-01-11 09:12:50

标签: react-native react-native-android

我想在点击文字时打开日历组件。

<Text onPress={_onPressButton}>Select date</Text>

var _onPressButton = () => {
        return (
             <DatePicker />
        )
    };

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

3 个答案:

答案 0 :(得分:0)

你使用什么日期选择器?因为我猜它不是来自react-native库的DatePickerAndroid或DatePickerIOS。我认为你使用react-native-datepicker。它在视图中创建新组件,因此不确定您是否能够从不同位置打开它(在文本单击时)。在我看来,React Native Picker更好,因为有方法Picker.show()所以你可以在文本按下显示它。

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

你必须使用在数组中传递的properdata来初始化选择器。

$(document).ready(function () { $('a').on("click", function () {           
   e.preventDefault(); 
   $("#content").load(this.getAttribute('href')); 
});

然后在第一次点击时你必须使用这个函数初始化选择器然后用Picker.show()显示选择器;

答案 1 :(得分:0)

 - @IBAction func BtnFaceBookLogin(_ sender: Any)
       {
           let fbLoginManager : FBSDKLoginManager = FBSDKLoginManager()
           fbLoginManager.logOut()
           fbLoginManager.logIn(withReadPermissions: ["public_profile", "email"], from: self) { (result, error) -> Void in
               if (error == nil){
                   let fbloginresult : FBSDKLoginManagerLoginResult = result!
                   if(fbloginresult.grantedPermissions.contains("email"))
                   {
                       self.getFBUserData()
                   }
               }
           }
       }

   func getFBUserData()
       {
           if((FBSDKAccessToken.current()) != nil)
           {
               FBSDKGraphRequest(graphPath: "me", parameters: ["fields": "id, name, first_name, last_name, picture.type(large),
   email"]).start(completionHandler: { (connection, result, error) ->
   Void in
                   if (error == nil)
                   {
                       print(result!)

                       let socialID1:[String:AnyObject] = result as! [String : AnyObject]

                       let socialID = socialID1["id"] as! String

                       print(socialID)
                   }
                   else
                   {
                       print("Not Dismiss");
                   }
               })
           }
       }

答案 2 :(得分:0)

您必须保留对数据选择器组件的引用,并使用日期选择器引用来调用方法“ onPressDate”。

注意:@Nima我根据您使用的软件包回答此问题( https://github.com/xgfe/react-native-datepicker

检查下面的代码段

在构造函数中:

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

updateRef方法:

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

DatePicker组件:

                          <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();
    }

希望这会有所帮助。