请不要直接烤我,我对 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>
)
}
}
答案 0 :(得分:0)
您可以在组件中运行代码并将数据保留在状态中,而不是为您的 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>
)
}
}