Question

请不要直接烤我，我对 react-native 还很陌生，但希望有人能够帮助我并让我更好地理解。

我有两个类，“SelectImage”打开 ImagePicker 并让用户从它的库中选择一张照片，以及呈现页面“ShowContent”的主类。在呈现的页面中，onPress 事件调用函数“SelectImage_func”，该函数通过“SelectImage”类打开图像选择器，到目前为止，它工作得很好，console.log(...) 向我显示了所选图像的 uri。

但我希望现在可以在“ShowContent”类中使用该 URI，也许作为 state.cover 值，我可以通过某种方式实现它，或者有人可以告诉我实现方法吗？

在此先非常感谢您，我从几天来就一直挂在这里，没有进一步...

这是我目前的代码

import React, { Component, useState, useEffect } from 'react';
import Moment from 'moment';
import { encode } from "base-64";
import 'react-native-gesture-handler';
import { LinearGradient } from 'expo-linear-gradient'
import { Badge, withBadge } from 'react-native-elements'
import Icon from 'react-native-vector-icons/MaterialIcons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { Alert, Button, RefreshControl, StyleSheet, Image, TouchableOpacity, ActivityIndicator, FlatList, Text, View, ListView, Platform } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator} from 'react-navigation-stack';
import styles from './../components/styles.js'
import * as ImagePicker from 'expo-image-picker';


export class SelectImage extends Component {
  SelectImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
         mediaTypes: ImagePicker.MediaTypeOptions.Images,
         allowsEditing: true,
         aspect: [4, 3],
         quality: 1,
         exif: 1,
         base64: false
    });

    console.log("SelectImage", result.uri)

    //************
    // 1.)
    // Can i update the state from the other class maybe directly from here?!
    //
    //************
    return(result.uri)
  }
}

export default class ShowContent extends Component {
  static navigationOptions = {
    headerShown: false
  };

  constructor(props) {
    super(props)
    this.state = {
          cover: false
    }
  }

  //************
  // 2.) 
  // This is the function that calls the class SelectImage and which i want to update the state.cover to
  // the image uri it gets from the response/result
  //
  //************
  SelectImage_func=()=>{
    var obj = new SelectImage();
    obj.SelectImage();
  }

  render() {
      const { navigation } = this.props;
      return (
        <View>
          <View>
            <LinearGradient style={styles.navBar} colors={['#444444', '#FFFFFF']}>
              <Text nativeID="foobar" style={{ color: "#444444", marginTop: 30 }}>
                Title
              </Text>
            </LinearGradient>
          </View>

          <View style={styles.body}>
            <View style={styles.page_header}>
              <Text>

                //************
                // 3.)
                // here should be the uri which i get from the class SelectImage respectively the
                // onPress event which calls the function SelectImage_func() some lines below
                //
                //************

                Add a Cover Image = {this.state.cover}
              </Text>
            </View>

            <View style={styles.take_or_select}>
              <View style={ styles.uploadPhoto }>
                <Text>
                  Upload a Photo
                </Text>

                //************
                // 4.)
                // onPress execute functions happens here in the upcoming line
                //
                //************

                <TouchableOpacity onPress={ () => this.SelectImage_func()}>
                  <MaterialCommunityIcons name="file-image-outline" size={125}/>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </View>
      )
  }
}

Answer 1

您可以在组件中运行代码并将数据保留在状态中，而不是为您的 ImagePicker 创建一个新类。我知道这不是您问题的答案，但以下是实现您想要做的事情的建议方法。

class ShowContent extends Component {
  // ....
  state = {
    cover: null,
  }

  // create an async arrow function
  selectImage = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({
         mediaTypes: ImagePicker.MediaTypeOptions.Images,
         allowsEditing: true,
         aspect: [4, 3],
         quality: 1,
         exif: 1,
         base64: false
    });
        
    if (result.uri) {
        // update your state to rerender your component with the received image
        this.setState({cover: result.uri})
    }    
  }

  render() {
      return (
        <View>          
          <View style={styles.body}>
            <View style={styles.page_header}>
              <Text>
                Add a Cover Image = {this.state.cover}
              </Text> 

              // Or add an image and view it here. 
              <Image style={{width: 100, height: 100}} source={{ uri: this.state.cover }} />

            </View>

            <View style={styles.take_or_select}>
              <View style={ styles.uploadPhoto }>
                <Text>
                  Upload a Photo
                </Text>
                <TouchableOpacity onPress={ () => this.selectImage()}>
                  <MaterialCommunityIcons name="file-image-outline" size={125}/>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </View>
    )
  }
}

其次，这是一种在 React 组件之间进行通信的方式。我们创建了一个更新父组件状态的函数，并将其作为 prop 传递给子组件。

每当您在子组件中调用该函数时，它都会使用更新后的状态重新渲染父组件。

class ParentComponent extends Component {
 state = {
  cover: null
 }

 parentFunction = (cover) => {
   // this cover is coming from child
   this.setState({cover: cover})
 }
 render() {
   return (
     <View>
       <ChildComponent cover={this.state.cover} updateParent={this.parentFunction} />
     </View>
   )
 }
}

class ChildComponent extends Component {
 
 render() {
   // this cover is coming from parent
   console.log(this.props.cover)

   return (
     <TouchableOpacity onPress={ () => this.props.updateParent("Some value")}>
         <Text>Call parent function</Text>
     </TouchableOpacity>
   )
 }
}

将结果从一个班级传递到另一个班级

1 个答案: