{"id":1712,"date":"2017-05-07T17:18:26","date_gmt":"2017-05-07T08:18:26","guid":{"rendered":"http:\/\/lovelinux.mydns.jp\/?p=1712"},"modified":"2017-05-07T17:18:26","modified_gmt":"2017-05-07T08:18:26","slug":"react-native%e3%81%a7%e3%82%ab%e3%83%a1%e3%83%a9%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e4%b8%80%e8%a6%a7%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%a6%e3%80%81%e9%81%b8%e6%8a%9e%e3%81%97%e3%81%9f%e7%94%bb","status":"publish","type":"post","link":"https:\/\/lovelinux.mydns.jp\/?p=1712","title":{"rendered":"React Native\u3067\u30ab\u30e1\u30e9\u30ed\u30fc\u30eb\u3092\u4e00\u89a7\u8868\u793a\u3057\u3066\u3001\u9078\u629e\u3057\u305f\u753b\u50cf\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3059\u308b"},"content":{"rendered":"

\u306f\u3058\u3081\u306b<\/h3>\n

React Native\u3067\u30ab\u30e1\u30e9\u30ed\u30fc\u30eb\u3092\u3044\u3058\u308b\u65b9\u6cd5\u304c\u308f\u304b\u3089\u306a\u304b\u3063\u305f\u306e\u3067\u8abf\u3079\u307e\u3057\u305f\u3002
\n\u3064\u3044\u3067\u306b\u3001\u4e00\u89a7\u8868\u793a\u3057\u305f\u753b\u50cf\u304b\u3089\u3001\u8907\u6570\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e\u3057\u3001axios\u3067\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3059\u308b\u3068\u3053\u308d\u307e\u3067\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002
\n\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u306fRails\u3067\u53d7\u3051\u53d6\u308b\u30bd\u30fc\u30b9\u3092\u306e\u3063\u3051\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n

\u6700\u5f8c\u306b\u5168\u30bd\u30fc\u30b9\u3092\u8cbc\u308a\u4ed8\u3051\u307e\u3059\u3002
\n\u8aac\u660e\u306f\u90e8\u5206\u90e8\u5206\u304b\u3044\u3064\u307e\u3093\u3067\u884c\u3044\u307e\u3059\u3002<\/p>\n

CameraRoll\u304b\u3089\u753b\u50cf\u4e00\u89a7\u53d6\u5f97<\/h3>\n

\u30ab\u30e1\u30e9\u30ed\u30fc\u30eb\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3066\u3001
\n[bash]
\nimport {
\n CameraRoll,
\n} from “react-native”
\n[\/bash]<\/p>\n

componentDidMount\u3067\u4e00\u89a7\u3092\u53d6\u5f97\u3057\u3001State\u306b\u30bb\u30c3\u30c8\u3057\u307e\u3059\u3002
\nimageSel\u306f\u753b\u50cf\u304c\u9078\u629e\u3055\u308c\u305f\u304b\u3069\u3046\u304b\u306e\u30d5\u30e9\u30b0\u3067\u3059\u3002<\/p>\n

[bash]<\/p>\n

componentDidMount() {
\n let svThis = this
\n CameraRoll.getPhotos({first:25})
\n .then(function(obj){
\n console.log(obj)
\n svThis.storeImages(obj.edges, svThis)
\n })
\n }<\/p>\n

storeImages(edges,svThis) {
\n const images = edges.map((asset) => {
\n \/\/Alert.alert(asset.node.image.uri)
\n return asset.node.image
\n })<\/p>\n

let imgSel = []
\n images.map((img) => {
\n imgSel.push({uri: img.uri, selected: false})
\n })<\/p>\n

svThis.setState({images: images, imageSel: imgSel})
\n }<\/p>\n

[\/bash]<\/p>\n

\u753b\u50cf\u4e00\u89a7\u8868\u793a<\/h3>\n

render\u30e1\u30bd\u30c3\u30c9\u3067\u4e00\u89a7\u8868\u793a\u3057\u307e\u3059\u3002
\n\u753b\u50cf\u3092TouchableHighlight\u30bf\u30b0\u306e\u4e2d\u306b\u30bb\u30c3\u30c8\u3057\u307e\u3059\u3002\u753b\u50cf\u304c\u9078\u629e\u3055\u308c\u3066\u3044\u308b\u304b\u5426\u304b\u3092 selView\u3068\u3044\u3046\u5909\u6570\u306b\u30bb\u30c3\u30c8\u3057\u3066\u3001
\n\u9078\u629e\u4e2d\u306e\u753b\u50cf\u306b\u30c1\u30a7\u30c3\u30af\u304c\u3064\u304f\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n

[bash]<\/p>\n

render() {
\n let imgs = []
\n imgs = this.state.images.map((img) => {<\/p>\n

let selTrue = false
\n let selView = null
\n this.state.imageSel.map((sel) => {
\n if (sel.uri == img.uri && sel.selected == true){
\n selTrue = true
\n }
\n })<\/p>\n

if (selTrue){
\n selView = (
\n
\n
\n <\/View>
\n )
\n }<\/p>\n

return (
\n this.handleClick(img)}>
\n
\n
\n {selView}
\n <\/View>
\n <\/TouchableHighlight>
\n )
\n })<\/p>\n

return (
\n
\n
\n {this.state.selPhoto}
\n <\/Text>
\n this.handleUpload()}
\n title=”Upload”
\n \/>
\n
\n
\n {imgs}
\n <\/View>
\n <\/ScrollView>
\n <\/View>
\n )
\n }<\/p>\n

[\/bash]<\/p>\n

\u753b\u50cf\u304c\u9078\u629e\u3055\u308c\u305f\u3089\u3001\u30c1\u30a7\u30c3\u30af\u30de\u30fc\u30af\u3092\u3064\u3051\u308b<\/h3>\n

\u753b\u50cf\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3089\u3001\u30b9\u30c6\u30fc\u30c8\u306e\u30d5\u30e9\u30b0\u3092\u305f\u3066\u304b\u3048\u3066\u3001\u30c1\u30a7\u30c3\u30af\u30de\u30fc\u30af\u3092\u3064\u3051\u307e\u3059\u3002<\/p>\n

[bash]
\n handleClick(img) {
\n let imgSel = this.state.imageSel.map((sel) => {
\n if (sel.uri == img.uri){
\n sel.selected = !sel.selected
\n }
\n return sel
\n })<\/p>\n

this.setState({imageSel: imgSel, selPhoto: img.uri})
\n }<\/p>\n

[\/bash]
\n\"cameraroll-1\"<\/a><\/p>\n

\u9078\u629e\u3055\u308c\u305f\u753b\u50cf\u3092axios\u3067\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9<\/h3>\n

\u6ce8\u610f\u3059\u3079\u304d\u70b9\u306f\u3001data.append\u3059\u308b\u3068\u304d\u306b uri\u3068 name \u3068 type\u306e3\u3064\u3092\u30bb\u30c3\u30c8\u3059\u308b\u3053\u3068\u3067\u3059\u3002<\/p>\n

[bash]<\/p>\n

handleUpload(){
\n let data = new FormData()
\n let cnt = 1
\n this.state.imageSel.map((sel) => {
\n if (sel.selected){
\n data.append(“file_” + cnt, {uri: sel.uri ,name: “photo_” + cnt + “.jpg”,type:”image\/jpg”})
\n cnt += 1
\n }
\n })<\/p>\n

let REQ_URI = “http:\/\/192.168.11.3:3000\/upload_image_from_native”
\n axios.post(REQ_URI,data)
\n .then(function(res){
\n Alert.alert(“good”)
\n })
\n .catch(function(err){
\n console.log(err)
\n })
\n }<\/p>\n

[\/bash]<\/p>\n

\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3055\u308c\u305f\u753b\u50cf\u3092\u4fdd\u5b58\u3059\u308b\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9(Rails)\u306e\u30bd\u30fc\u30b9<\/h3>\n

[bash]
\ndef upload_image_from_native
\n image_path = Rails.root.to_s + “\/public\/upload_images\/reactnative”
\n FileUtils.mkdir_p(image_path) unless FileTest.exist?(image_path)<\/p>\n

pp “************** params *******************”
\n pp params<\/p>\n

cnt = 1
\n while true do
\n break if params[“file_” + cnt.to_s].blank?
\n file = params[“file_” + cnt.to_s]
\n fname = file.original_filename<\/p>\n

File.open(image_path + “\/#{fname}”, ‘wb’) { |f|
\n f.write(file.read)
\n }
\n cnt += 1
\n end<\/p>\n

end<\/p>\n

[\/bash]<\/p>\n

\u5168\u30bd\u30fc\u30b9<\/h3>\n

\u4ee5\u4e0b\u306b\u5168\u30bd\u30fc\u30b9\u3092\u8cbc\u308a\u4ed8\u3051\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n

[bash]
\nimport React from “react”<\/p>\n

import {
\n StyleSheet,
\n Text,
\n View,
\n ScrollView,
\n Image,
\n CameraRoll,
\n Alert,
\n TouchableHighlight,
\n Button,
\n} from “react-native”<\/p>\n

import axios from “axios”<\/p>\n

class App extends React.Component {
\n constructor(props){
\n super(props)
\n this.state = {images: [], imageSel: [], selPhoto: “”}
\n }<\/p>\n

componentDidMount() {
\n let svThis = this
\n CameraRoll.getPhotos({first:25})
\n .then(function(obj){
\n console.log(obj)
\n svThis.storeImages(obj.edges, svThis)
\n })
\n }<\/p>\n

storeImages(edges,svThis) {
\n const images = edges.map((asset) => {
\n \/\/Alert.alert(asset.node.image.uri)
\n return asset.node.image
\n })<\/p>\n

let imgSel = []
\n images.map((img) => {
\n imgSel.push({uri: img.uri, selected: false})
\n })<\/p>\n

svThis.setState({images: images, imageSel: imgSel})
\n }<\/p>\n

logImageError(err) {
\n console.log(err)
\n }<\/p>\n

handleClick(img) {
\n let imgSel = this.state.imageSel.map((sel) => {
\n if (sel.uri == img.uri){
\n sel.selected = !sel.selected
\n }
\n return sel
\n })<\/p>\n

this.setState({imageSel: imgSel, selPhoto: img.uri})
\n }<\/p>\n

handleUpload(){
\n let data = new FormData()
\n let cnt = 1
\n this.state.imageSel.map((sel) => {
\n if (sel.selected){
\n data.append(“file_” + cnt, {uri: sel.uri ,name: “photo_” + cnt + “.jpg”,type:”image\/jpg”})
\n cnt += 1
\n }
\n })<\/p>\n

let REQ_URI = “http:\/\/192.168.11.3:3000\/upload_image_from_native”
\n axios.post(REQ_URI,data)
\n .then(function(res){
\n Alert.alert(“good”)
\n })
\n .catch(function(err){
\n console.log(err)
\n })
\n }<\/p>\n

render() {
\n let imgs = []
\n imgs = this.state.images.map((img) => {<\/p>\n

let selTrue = false
\n let selView = null
\n this.state.imageSel.map((sel) => {
\n if (sel.uri == img.uri && sel.selected == true){
\n selTrue = true
\n }
\n })<\/p>\n

if (selTrue){
\n selView = (
\n
\n
\n <\/View>
\n )
\n }<\/p>\n

return (
\n this.handleClick(img)}>
\n
\n
\n {selView}
\n <\/View>
\n <\/TouchableHighlight>
\n )
\n })<\/p>\n

return (
\n
\n
\n {this.state.selPhoto}
\n <\/Text>
\n this.handleUpload()}
\n title=”Upload”
\n \/>
\n
\n
\n {imgs}
\n <\/View>
\n <\/ScrollView>
\n <\/View>
\n )
\n }
\n}<\/p>\n

const styles = StyleSheet.create({
\n container: {
\n flex: 1,
\n backgroundColor: ‘#F5FCFF’,
\n },
\n imageGrid: {
\n flex: 1,
\n flexDirection: ‘row’,
\n flexWrap: ‘wrap’,
\n justifyContent: ‘center’
\n },
\n image: {
\n width: 100,
\n height: 100,
\n margin: 10,
\n },
\n imageSel: {
\n position: “absolute”,
\n top: 15,
\n left: 15,
\n },
\n check: {
\n height: 20,
\n width: 20,
\n }
\n})<\/p>\n

export default App<\/p>\n

[\/bash]<\/p>\n","protected":false},"excerpt":{"rendered":"

\u306f\u3058\u3081\u306b React Native\u3067\u30ab\u30e1\u30e9\u30ed\u30fc\u30eb\u3092\u3044\u3058\u308b\u65b9\u6cd5\u304c\u308f\u304b\u3089\u306a\u304b\u3063\u305f\u306e\u3067\u8abf\u3079\u307e\u3057\u305f\u3002 \u3064\u3044\u3067\u306b\u3001\u4e00\u89a7\u8868\u793a\u3057\u305f\u753b\u50cf\u304b\u3089\u3001\u8907\u6570\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e\u3057\u3001axios\u3067\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3059\u308b\u3068\u3053\u308d\u307e\u3067\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002 \u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u306fRails\u3067\u53d7\u3051\u53d6\u308b\u30bd\u30fc\u30b9\u3092\u306e\u3063\u3051\u3066\u304a\u304d\u307e\u3059\u3002 \u6700\u5f8c\u306b\u5168\u30bd\u30fc\u30b9\u3092\u8cbc\u308a\u4ed8\u3051\u307e\u3059\u3002 \u8aac\u660e\u306f\u90e8\u5206\u90e8\u5206\u304b\u3044\u3064\u307e\u3093\u3067\u884c\u3044\u307e\u3059\u3002 CameraRoll\u304b\u3089\u753b\u50cf\u4e00\u89a7\u53d6\u5f97 \u30ab\u30e1\u30e9\u30ed\u30fc\u30eb\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3066\u3001 [bash] import { CameraRoll, } from “react-native” [\/bash] componentDidMount\u3067\u4e00\u89a7\u3092\u53d6\u5f97\u3057\u3001State\u306b\u30bb\u30c3\u30c8\u3057\u307e\u3059\u3002 imageSel\u306f\u753b\u50cf\u304c\u9078\u629e\u3055\u308c\u305f\u304b\u3069\u3046\u304b\u306e\u30d5\u30e9\u30b0\u3067\u3059\u3002 [bash] componentDidMount() { let svThis = this CameraRoll.getPhotos({first:25}) .then(function(obj){ console.log(obj) svThis.storeImages(obj.edges, svThis) }) } storeImages(edges,svThis) { const images = edges.map((asset) => { \/\/Alert.alert(asset.node.image.uri) return asset.node.image }) let imgSel = [] images.map((img) => { imgSel.push({uri: img.uri, selected: false}) }) svThis.setState({images: images, imageSel: imgSel}) } [\/bash] \u753b\u50cf\u4e00\u89a7\u8868\u793a render\u30e1\u30bd\u30c3\u30c9\u3067\u4e00\u89a7\u8868\u793a\u3057\u307e\u3059\u3002 \u753b\u50cf\u3092TouchableHighlight\u30bf\u30b0\u306e\u4e2d\u306b\u30bb\u30c3\u30c8\u3057\u307e\u3059\u3002\u753b\u50cf\u304c\u9078\u629e\u3055\u308c\u3066\u3044\u308b\u304b\u5426\u304b\u3092 selView\u3068\u3044\u3046\u5909\u6570\u306b\u30bb\u30c3\u30c8\u3057\u3066\u3001 \u9078\u629e\u4e2d\u306e\u753b\u50cf\u306b\u30c1\u30a7\u30c3\u30af\u304c\u3064\u304f\u3088\u3046\u306b\u3057\u307e\u3059\u3002 [bash] render() { let imgs = [] imgs = this.state.images.map((img) => { let selTrue = false let selView = null this.state.imageSel.map((sel) => { if (sel.uri == img.uri && sel.selected == true){ selTrue = true } }) if (selTrue){ selView = ( ) } return ( this.handleClick(img)}> {selView} ) }) return ( {this.state.selPhoto} this.handleUpload()} title=”Upload” \/> {imgs} ) } [\/bash] \u753b\u50cf\u304c\u9078\u629e\u3055\u308c\u305f\u3089\u3001\u30c1\u30a7\u30c3\u30af\u30de\u30fc\u30af\u3092\u3064\u3051\u308b \u753b\u50cf\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3089\u3001\u30b9\u30c6\u30fc\u30c8\u306e\u30d5\u30e9\u30b0\u3092\u305f\u3066\u304b\u3048\u3066\u3001\u30c1\u30a7\u30c3\u30af\u30de\u30fc\u30af\u3092\u3064\u3051\u307e\u3059\u3002 [bash] handleClick(img) { let imgSel = this.state.imageSel.map((sel) => { if (sel.uri == img.uri){ sel.selected = !sel.selected } return sel }) this.setState({imageSel: imgSel, selPhoto: img.uri}) } [\/bash] \u9078\u629e\u3055\u308c\u305f\u753b\u50cf\u3092axios\u3067\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9 \u6ce8\u610f\u3059\u3079\u304d\u70b9\u306f\u3001data.append\u3059\u308b\u3068\u304d\u306b uri\u3068 name \u3068 type\u306e3\u3064\u3092\u30bb\u30c3\u30c8\u3059\u308b\u3053\u3068\u3067\u3059\u3002 [bash] handleUpload(){ let data = new FormData() let cnt = 1 this.state.imageSel.map((sel) => { if (sel.selected){ data.append(“file_” + cnt, {uri: sel.uri ,name: “photo_” + cnt + “.jpg”,type:”image\/jpg”}) cnt += 1 } }) let REQ_URI = “http:\/\/192.168.11.3:3000\/upload_image_from_native” axios.post(REQ_URI,data) .then(function(res){ Alert.alert(“good”) }) .catch(function(err){ console.log(err) }) } [\/bash] \u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3055\u308c\u305f\u753b\u50cf\u3092\u4fdd\u5b58\u3059\u308b\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9(Rails)\u306e\u30bd\u30fc\u30b9 [bash] def upload_image_from_native image_path = Rails.root.to_s + “\/public\/upload_images\/reactnative” FileUtils.mkdir_p(image_path) unless FileTest.exist?(image_path) pp “************** params *******************” pp params cnt = 1 while true do break if params[“file_” + cnt.to_s].blank? file = params[“file_” + cnt.to_s] fname = file.original_filename File.open(image_path + “\/#{fname}”, ‘wb’) { |f| f.write(file.read) } cnt += 1 end end [\/bash] \u5168\u30bd\u30fc\u30b9 \u4ee5\u4e0b\u306b\u5168\u30bd\u30fc\u30b9\u3092\u8cbc\u308a\u4ed8\u3051\u3066\u304a\u304d\u307e\u3059\u3002 [bash] import React from “react” import { StyleSheet, Text, View, ScrollView, Image, CameraRoll, Alert, TouchableHighlight, Button, } from “react-native” import axios from “axios” class App extends React.Component { constructor(props){ super(props) this.state = {images: [], imageSel: [], selPhoto: “”} } componentDidMount() {…<\/p>\n","protected":false},"author":1,"featured_media":1714,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[77],"tags":[86,79],"class_list":{"0":"post-1712","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-react","8":"tag-react","9":"tag-react-native"},"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t