2017-10-21 15 views
0

まず、Image Pickerを使用してイメージを取得し、RNFetchBlobをAPIで送信します。 私はいくつかのテキスト入力があり、最後にボタンを押すと同時にこの入力を画像とともに送信したいと思います。それのために私はそれを送るための状態として画像uriを保存しようとしています。しかし、_this2.setStateは関数ではないようです。現時点で私はそれを解決する方法を知らない。状態が正常に動作していない状態でイメージを保存する

これは私のコードを簡略化したものです。

class Create extends Component{ 

    constructor(props){ 
    super(props); 
    this.state = { 
     foto: '', 
    }  
    } 

openImagePicker(){ 
    const options = { 
    title: 'Select Avatar', 
    storageOptions: { 
     skipBackup: true, 
     path: 'images' 
        } 
    } 

    ImagePicker.showImagePicker(options, (imagen) =>{ 
     if (imagen.didCancel) { 
    console.log('User cancelled image picker'); 
    } 
    else if (imagen.error) { 
    console.log('ImagePicker Error: ', imagen.error); 
    } 
    else if (imagen.customButton) { 
    console.log('User tapped custom button: ', imagen.customButton); 
    } 
    else { 
    let source = { uri: imagen.uri }; 
    console.log(source.uri); 
    this.setState({ 
     foto: source.uri 
     })  
} 

render(){ 
     return(  
    <Container> 
     <Header><Title>Eat</Title></Header> 
     <Content> 
      <Text>Título</Text> 
      <View> 
       <TextInput 
       onChangeText={(text) => this.titulo = text} 
       /> 
      </View> 
      <Text>Personas</Text> 
      <View style={styles.container}> 
       <TextInput    
       type="number" 
       onChangeText={(text) => this.personas = text} 
       /> 
      </View> 
      <Text>Foto</Text> 
      <View> 
      <TouchableOpacity activeOpacity={.8} onPress={this.openImagePicker}> 
       <View> 
        <Text>Cambiar</Text> 
       </View> 
      </TouchableOpacity> 
      </View> 
      <View> 
      <ScrollView > 
      <TouchableHighlight onPress={(this._create.bind(this))}> 
       <Text>Crear Receta</Text> 
      </TouchableHighlight> 
      </ScrollView> 
      </View> 
     </Content> 
    </Container> 
       ) 
    } 

_create() { 


RNFetchBlob.fetch('POST', 'XXXXXXXXXXXX', { 
    'Content-Type' : 'multipart/form-data', 
    }, 
    [ 
    // element with property `filename` will be transformed into `file` in form data 
    { name : 'file', filename : 'avatar-foo.png', type:'image/foo', data: RNFetchBlob.wrap(source.uri)}, 
    { name : 'info', data : JSON.stringify({ 
     "titulo": this.titulo, 
     "personas": this.personas, 
    })} 
    ]).then((resp) => { 
    console.log("ok"); 
    }).catch((err) => { 
    console.log(err); 
    }) 
    } 
    }) 
    } 

} 
+0

あなたの関数に 'this'をバインドする必要があります。 [イベントの処理](https://reactjs.org/docs/handling-events.html) – bennygenel

+0

ありがとうございます!今働いている –

答えて

2

あなたの方法openImagePickerを結合するか、または、このようにそれを呼び出すことができますいずれか:あなたは、クラスのコンテキストにアクセスできるように

onPress={() => this.openImagePicker()} 

関連する問題