Question

我正在尝试将此库https://github.com/country-regions/react-country-region-selector用于我的本机应用程序。

示例代码如下：

    import * as firebase from 'firebase';

export class StorageService {

  public static readonly CHILD_PATH = '/photos/';
  public static readonly FORMAT = '.jpg';
  public static readonly BASE = 'base64';
  public static readonly CONTENT_TYPE = 'image/jpg';

  constructor() {}

  savePhoto(data: string): string{

    let fileName = new Date().getTime().toString();
    let downloadUrl: string = null;

    let baseReference = firebase.storage().ref();
    let childReference = baseReference.child(StorageService.CHILD_PATH + fileName + StorageService.FORMAT);
    let task = childReference.putString(data, StorageService.BASE, {contentType:StorageService.CONTENT_TYPE});
    task
      .then(snapshot => snapshot.ref.getDownloadURL())
      .then(url => downloadUrl = url)
      .catch(
      (error) => {
        throw new Error(error.toString());
      }
    );

    return downloadUrl;
  }
}

我将render方法中的import {Injectable} from "@angular/core"; import {Picture} from "../models/Picture.model"; import {Subject} from "rxjs"; import * as firebase from 'firebase'; import DataSnapshot = firebase.database.DataSnapshot; import {Platform} from "ionic-angular"; import {StorageService} from "./Storage.service"; @Injectable() export class PictureService { pictures: Picture[] = []; picturesSubject = new Subject<Picture[]>(); constructor(private platform: Platform, private storageService: StorageService){ this.platform.ready().then(() => { this.getPictures(); }); } emitPictures() { this.picturesSubject.next(this.pictures); } savePictures() { firebase.database().ref('/pictures').set(this.pictures); } getPictures() { firebase.database().ref('/pictures').on('value', (data: DataSnapshot) => { this.pictures = data.val() ? data.val() : []; this.emitPictures(); }); } createNewPicture(newPicture: Picture, data: string) { try{ let url = this.storageService.savePhoto(data); newPicture.setUrl(url); this.pictures.push(newPicture); this.savePictures(); this.emitPictures(); } catch (e) { throw new Error(e.toString()); } } }更改为import React from "react"; import { View, Text } from 'react-native'; // note that you can also export the source data via CountryRegionData. It's in a deliberately concise format to // keep file size down import { CountryDropdown, RegionDropdown, CountryRegionData } from "react-country-region-selector"; class Example extends React.Component { constructor(props) { super(props); this.state = { country: "", region: "" }; } selectCountry(val) { this.setState({ country: val }); } selectRegion(val) { this.setState({ region: val }); } render() { const { country, region } = this.state; return ( <View> <CountryDropdown value={country} onChange={val => this.selectCountry(val)} /> <RegionDropdown country={country} value={region} onChange={val => this.selectRegion(val)} /> </View> ); } } export default Example;，这使我陷入了当前错误：不变冲突：找不到名称选项的视图配置。

我不确定这是否是因为该库是针对React而非React-Native的，还是因为我不知道还有其他事情在发生。

Answer 1

这将不起作用，因为该库呈现HTML，而react-native中不提供HTML。您可以通过转到node_modules/react-country-region-selector/src来查看源代码来确认这一点。

但是，Picker中的react-native组件具有非常相似的API，因此您可以轻松地使其重新兼容。请注意，您不应编辑node_modules中的文件，因为任何时候运行yarn / npm都会对它们进行纠正。相反，您应该为此模块创建自己的本地版本。

这实际上仅是用select替换Picker并用option替换Picker.Item并更改onChange处理程序以与{{1}一起使用}，而不是期待DOM事件。

You can learn more about the Picker API here

不变违反：找不到名称选项的视图配置（React Native）

1 个答案: