Question

import React, {Component} from 'react';
import {Platform,StyleSheet,Text,View,TouchableOpacity,Alert,Image,Button} from 'react-native';
import { Dialog } from 'react-native-simple-dialogs';
import AsyncStorage from '@react-native-community/async-storage';

import MapView from 'react-native-maps';
import datum from './data';
import { Marker } from 'react-native-maps';
import Parse from "parse/react-native";


import Geolocation from 'react-native-geolocation-service';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
const homePlace = { description: 'Home', geometry: { location: { lat: 48.8152937, lng: 2.4597668 } }};
const workPlace = { description: 'Work', geometry: { location: { lat: 48.8496818, lng: 2.2940881 } }};


export default class Home extends React.Component{

 static navigationOptions = {
    title: 'Home',
   headerLeft: (
     <Button
       onPress={() => console.log('clicked',"sdsd")}
       title=""
     />
   ),
   headerRight: (
     <Button
       onPress={() => this.toogleauto()}
         color={datum.primaryColor}
       title="Toggle"
     />
   ),
   headerStyle: {
   backgroundColor:datum.secondaryColor,
 },
 headerTintColor:datum.primaryColor,
 headerTitleStyle: {
     fontWeight: '200',
   },
 };



  constructor(props) {
  super(props);

     this.state = {
       lat:13.0474878,
       long:80.0689267,
       picklat:0,
       picklong:0,
       droplat:0,
       droplong:0,
       curautostate:'pick',
       curautostateplaceholder:'Enter your pick up location',
       distance:0

     }
   }

    toogleauto=()=>{
if(this.state.curautostate=='pick'){
 this.setState({curautostate:'drop'})
 this.setState({curautostateplaceholder:'Enter your drop location'})
}else if(this.state.curautostate=='drop'){
   this.setState({curautostate:'pick'})
   this.setState({curautostateplaceholder:'Enter your pick location'})
}else {

}

}

  render() {
    return (

      <View style={{flex:1,flexDirection:'column',backgroundColor:datum.secondaryColor}}>

       <GooglePlacesAutocomplete

       placeholder={this.state.curautostateplaceholder}
       minLength={2} // minimum length of text to search
       autoFocus={false}
       returnKeyType={'search'} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
       keyboardAppearance={'light'} // Can be left out for default keyboardAppearance https://facebook.github.io/react-native/docs/textinput.html#keyboardappearance
       listViewDisplayed='false'   // true/false/undefined
       fetchDetails={true}
       renderDescription={row => row.description} // custom description render
       onPress={(data, details = null) => {

         if(this.state.curautostate=='pick'){
          this.setState({picklat:details.geometry.location.lat,picklong:details.geometry.location.lng})

       }else if (this.state.curautostate=='drop'){
         this.setState({droplat:details.geometry.location.lat,droplong:details.geometry.location.lng})
       }
       else {

       }


     }}

       getDefaultValue={() => ''}

       query={{
         // available options: https://developers.google.com/places/web-service/autocomplete
         key: 'AIzaSyCGuEI4rs_vL9HW0xtOeQNy6hngR8dBvhU',
         language: 'en', // language of the results
       // default: 'geocode'
       }}

       styles={{
         backgroundColor:datum.primaryColor,
         textInputContainer: {
           width: '100%'
         },
         textInputContainer: {
        backgroundColor: datum.secondaryColor,
        borderTopWidth: 0,
        borderBottomWidth:0
      },

      textInput: {
        marginLeft: 0,
        marginRight: 0,
        height: 38,
        color: datum.primaryColor,
        fontSize: 16
      },
      predefinedPlacesDescription: {
        color: '#1faadb'
      },
       }}

       nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
       GoogleReverseGeocodingQuery={{
         // available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
       }}
       GooglePlacesSearchQuery={{
         // available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
         rankby: 'distance',

       }}

       GooglePlacesDetailsQuery={{
         // available options for GooglePlacesDetails API : https://developers.google.com/places/web-service/details
         fields: 'formatted_address',
       }}

       filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities


       debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.



     />

</View>

    );
  }



}

预期的行为：

该功能将分配给按

实际发生的事情

错误自动切换功能不起作用

我刚刚针对堆栈溢出情况裁剪了很多代码，实际上，我很清楚我的问题是，将 toggleauto 功能分配给印刷机道具时会引起什么干扰，因为该应用程序在单击时崩溃了该导航按钮，但console .log可以正常工作，但我需要运行自己的功能

Answer 1

在代码顶部创建函数：

   toogleauto=()=>{
if(this.state.curautostate=='pick'){
 this.setState({curautostate:'drop'})
 this.setState({curautostateplaceholder:'Enter your drop location'})
}else if(this.state.curautostate=='drop'){
   this.setState({curautostate:'pick'})
   this.setState({curautostateplaceholder:'Enter your pick location'})
}else {

}

}


        .
         .
         .
         and other codes 
 static navigationOptions = {
    title: 'Home',
   headerLeft: (
     <Button
       onPress={() => console.log('clicked',"sdsd")}
       title=""
     />
   ),
   headerRight: (
     <Button
       onPress={() => this.toogleauto()}
         color={datum.primaryColor}
       title="Toggle"
     />
   ),
   headerStyle: {
   backgroundColor:datum.secondaryColor,
 },
 headerTintColor:datum.primaryColor,
 headerTitleStyle: {
     fontWeight: '200',
   },
 };

或直接将其绑定：

 headerRight: (
     <Button
       onPress={() => {
          //your function code 
          }}
         color={datum.primaryColor}
       title="Toggle"
     />
   ),

将功能分配给NavigationOption时出错

1 个答案: