{ DocumentPicker, ImagePicker } from "expo" 에대한 질문입니다

god972 · 1월 22, 2019, 7:02오전

해당 코드입니다

export class AddCarScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
      image: null,
      image2: null
    };
  }

  static navigationOptions = ({ navigation }) => {
    const params = navigation.state.params || {};

    return {
      title: "Add Car"
    };
  };
//이미지 불러오기 함수
  _pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3]
    });

    alert(result.uri);
    console.log(result);

    if (!result.cancelled) {
      this.setState({ image: result.uri });
    }
  };
// 파일등 여러가지 불러오기 함수
  _pickDocument = async () => {
    let result = await DocumentPicker.getDocumentAsync({
      type: "image/*",
      copyToCacheDirectory: true
    });
    alert(result.uri);
    console.log(result);

    if (!result.cancelled) {
      this.setState({ image2: result.uri });
    }
  };

  render() {
    let { image } = this.state;
    let { image2 } = this.state;
    return (
      <View style={styles.container}>
        <View style={{ alignItems: "center", paddingBottom: 50 }}>
          {image && (
            <Image
              source={{ uri: image }}
              style={{ width: "70%", height: 250, resizeMode: "stretch" }}
            />
          )}
          <Button title="사진 불러오기" onPress={this._pickImage} />
          <Button title="Select Document" onPress={this._pickDocument} />
          {image2 && (
            <Image
              source={{ uri: image2 }}
              style={{ width: "70%", height: 100, resizeMode: "stretch" }}
            />
          )}
        </View>
        <View
          style={{ flexDirection: "row", alignItems: "center", padding: 5 }}
        >
          <Text
            style={{
              fontSize: 18,
              justifyContent: "center",
              alignItems: "center",
              width: "20%",
              color: "#fff"
            }}
          >
            Vin:
          </Text>
          <TextInput
            secureTextEntry={true}
            style={{
              backgroundColor: "#fff",
              borderColor: "#fff",
              borderRadius: 15,
              borderWidth: 2,
              height: 40,
              width: "70%",
              paddingHorizontal: 10
            }}
            placeholder="Vin 넘버를 입력하세요"
          />
        </View>
        <View
          style={{ flexDirection: "row", alignItems: "center", padding: 5 }}
        >
          <Text
            style={{
              fontSize: 18,
              justifyContent: "center",
              alignItems: "center",
              width: "20%",
              color: "#fff"
            }}
          >
            Model:
          </Text>
          <TextInput
            secureTextEntry={true}
            style={{
              backgroundColor: "#fff",
              borderColor: "#fff",
              borderRadius: 15,
              borderWidth: 2,
              height: 40,
              width: "70%",
              paddingHorizontal: 10
            }}
            placeholder="Model명를 입력하세요"
          />
        </View>
        <View
          style={{ flexDirection: "row", alignItems: "center", padding: 5 }}
        >
          <Text
            style={{
              fontSize: 18,
              justifyContent: "center",
              alignItems: "center",
              width: "20%",
              color: "#fff"
            }}
          >
            차량회사:
          </Text>
          <TextInput
            secureTextEntry={true}
            style={{
              backgroundColor: "#fff",
              borderColor: "#fff",
              borderRadius: 15,
              borderWidth: 2,
              height: 40,
              width: "70%",
              paddingHorizontal: 10
            }}
            placeholder="차량 회사명을 입력하세요"
          />
        </View>
        <View
          style={{ flexDirection: "row", alignItems: "center", padding: 5 }}
        >
          <Text
            style={{
              fontSize: 18,
              justifyContent: "center",
              alignItems: "center",
              width: "20%",
              color: "#fff"
            }}
          >
            year:
          </Text>
          <TextInput
            secureTextEntry={true}
            style={{
              backgroundColor: "#fff",
              borderColor: "#fff",
              borderRadius: 15,
              borderWidth: 2,
              height: 40,
              width: "70%",
              paddingHorizontal: 10
            }}
            placeholder="차량 연식을 입력하세요"
            keyboardType="number-pad"
          />
        </View>
        <View
          style={{ flexDirection: "row", alignItems: "center", padding: 5 }}
        >
          <Text
            style={{
              fontSize: 18,
              justifyContent: "center",
              alignItems: "center",
              width: "20%",
              color: "#fff"
            }}
          >
            image:
          </Text>
          <TouchableOpacity
            style={[
              {
                width: "10%",
                height: 30,
                borderColor: "#fff",
                borderWidth: 1,
                borderRadius: 10,
                alignItems: "center",
                justifyContent: "center",
                backgroundColor: "#fff"
              }
            ]}
            onPress={() => {}}
          >
            <Ionicons name={"ios-add"} size={35} color={"gray"} />
          </TouchableOpacity>
        </View>
        <View style={{ alignItems: "center", padding: 5 }}>
          <TouchableOpacity
            style={{
              width: "100%",
              height: 30,
              borderColor: "#fff",
              borderWidth: 1,
              borderRadius: 10,
              alignItems: "center",
              justifyContent: "center",
              backgroundColor: "#74b9ff"
            }}
            onPress={() => {}}
          >
            <Text style={{ fontSize: 17, color: "#fff" }}> 차량 추가</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#74b9ff",
    justifyContent: "center"
  }
});

이 코드가 이미지 불러오는 코드인데 안드로이드는 되는데 아이폰에서 되질 않습니다.

구글에 찾아보니 해당 문제가 있던데 해결이 되지 않은건가요??
해결되려면 어떤구문을 추가 해야되나요?
https://github.com/expo/expo/issues/589 <-ios 이슈글

codejong · 1월 22, 2019, 12:32오후

다시 말씀드리비만 무언가 안될 때는 최우선적으로 관련 공식 문서를 다시 꼼꼼히 살펴 보세요. 처음 무언가를 배울 때 겪는 대부분의 문제는 공식문서를 보면 바로 원인을 알 수 있는 경우가 많습니다.
다음 공식 문서에 보시면 ios에서 필요한 권한이 있습니다. 권한 문제로 보입니다.
https://docs.expo.io/versions/v32.0.0/sdk/imagepicker/

codejong · 1월 23, 2019, 1:42오전

import React from 'react';
import { Button, Image, View } from 'react-native';
import { ImagePicker, Permissions } from 'expo';

export default class ImagePickerExample extends React.Component {
  state = {
    image: null,
  };
  async componentDidMount(){
    const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
  }
  render() {
    let { image } = this.state;

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Button
          title="Pick an image from camera roll"
          onPress={this._pickImage}
        />
        {image &&
          <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
      </View>
    );
  }

  _pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3],
    });

    console.log(result);

    if (!result.cancelled) {
      this.setState({ image: result.uri });
    }
  };
}

권한 관련해서는 이 예제를 참고해 보세요.~ 공식 문서는 한번씩 꼭 살펴보세요~

god972 · 1월 23, 2019, 7:51오전

해결에 도와주셔서 감사합니다 권한 문제에 대해서 어느정도 예상을 하고 있어서 공식문서를 보았는데 공식예제에도
저에게 링크해주신

 async componentDidMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
  }

이부분이 공식예제에도 나와있지 않아서… 찾지 못했습니다.

 "ios": {
      "supportsTablet": true
      // "ussI CloudStorage": true
    }

공식문서에 DocumentPicker부분을 이런식으로 추가하라고 되어 있어 추가해 보았지만 되지 않아서

해결하지 못했었습니다.
주석처리는 해당부분이 없어도 주신코드를 추가하면 작동해서 주석처리 했습니다.