Location 定位组件

渲染出一个定位组件

安装

npm install @qnpm/q-location --save --registry=http://npmrepo.corp.qunar.com

使用说明

显示代码

import Location from '@qnpm/q-location';

<Location
    success={(result) => {
        alert('成功'+ JSON.stringify(result));
    }}
    fail={(error) => {
        alert('失败'+ JSON.stringify(error));
    }}
/>

显示代码

import Location from '@qnpm/q-location';

<Location
    type={'imgText'}
    customStyle={{

    }}
    optoins={{}} // 定位API调用的参数， 可选
    success={(result) => {
        alert('成功'+ JSON.stringify(result));
        // result 调用api后成功的回调结果
    }}
    fail={(error) => {
        alert('失败'+ JSON.stringify(error));
        // error 调用api后失败的回调结果
    }}
/>

显示代码

import Location from '@qnpm/q-location';

<Location type={'singleRow'}
          text={'测试测每个demo的副标题，如果有title'}
          success={(result) => {
              alert('成功'+ JSON.stringify(result));
              // result 调用api后成功的回调结果
          }}
          fail={(error) => {
              alert('失败'+ JSON.stringify(error));
              // error 调用api后失败的回调结果
          }}
/>

显示代码

import Location from '@qnpm/q-location';

<Location  type={'custom'}
           success={(result) => {
               alert('成功'+ JSON.stringify(result));
               // result 调用api后成功的回调结果
           }}
           fail={(error) => {
               alert('失败'+ JSON.stringify(error));
               // error 调用api后失败的回调结果
           }}
>
    <Text>888888</Text>
</Location>

显示代码

import Location from '@qnpm/q-location';

<Location
    type={'imgText'} 
    text={'获取当前定位'}
    customStyle={{
        textStyle: {
            color: 'pink'
        }
    }}
    optoins={{}} // 定位API调用的参数， 可选
    success={(result) => {
        alert('成功'+ JSON.stringify(result));
        // result 调用api后成功的回调结果
    }}
    fail={(error) => {
        alert('失败'+ JSON.stringify(error));
        // error 调用api后失败的回调结果
    }}
/>

属性说明

属性名 类型 默认值 是否必须 说明
type onlyText|imgText
singleRow|custom		 onlyImg false UI展示类型
text string - false 展示文案；如果此字段不传则使用默认文案，如果存在则使用此字段，不显示可以设置为空字符串
customStyle object - false 针对当前展示类型，支持自定义部分样式，比如文字颜色大小,容器样式等
options object - null 定位API调用的参数，具体参考wiki：https://wiki.corp.qunar.com/confluence/pages/viewpage.action?pageId=635386626
success function - - 调用api后成功的回调结果
error function - - 调用api后成功的回调结果

customStyle 说明

customStyle 共支持以下样式自定义：

customStyle={{
    wrapperStyle: {}, // 容器样式
    textStyle: {}, // 文本样式
    locationIconStyle: {}, // imgText类型下，定位icon的样式
    closeIconStyle: {} // singleRow类型下，关闭按钮的样式
}}
Loading
LottieView