使用react-navigation从相机回拨图像uri

Question

我正在使用“react-navigation”创建两个选项卡，Home和Camera，并且相机选项卡中有一个标题按钮。此外，它使用“withNavigationFocus”来调用相机组件。

App.js文件：

const Home = createStackNavigator(
  {
    HomeStack: { screen: HomeScreen }
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#42f44b',
      },
      headerTintColor: '#FFFFFF',
      title: 'Home',
    },
  }
);

const CameraStack = createStackNavigator(
   {
    // take pictures of the bill
    Camera: { screen: CameraControler}
  },
  {
    defaultNavigationOptions: ({navigation}) => ({
      headerStyle: {
        backgroundColor: '#42f44b',
      },
      headerTintColor: '#FFFFFF',
      title: 'Add a Bill',
      headerRight: (
        <View style={{margin: 10}}>
          <Button
             onPress={() => console.log("IMAGE URI IS NEEDED HERE")}
            title="Done"
            color="#1d8581"
              />
        </View>
      ),
    }),
  }
);

const TabHolder = createBottomTabNavigator(
  {
    //Defination of Navigaton bottom options
    Add: { screen: CameraStack },
    Home: { screen: HomeStack }
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = SimpleLineIcons;
        let iconName;
        if (routeName === 'Add') {
          iconName = `camera`;
        } else if (routeName === 'Home') {
          iconName = `home`;
        }

        return <IconComponent name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: '#42f44b',
      inactiveTintColor: 'gray',
      showLabel: false
    },
    initialRouteName: "Home"
  }
);

const styles = StyleSheet.create({
  processButton: {
    marginRight: 10
  }
});

export default createAppContainer(TabHolder);

CameraController.js文件：

  import CameraScreen from './camerascreen';
  import { withNavigationFocus } from "react-navigation";

  class CameraControler extends React.Component {

        callBackPhoto = (photo) => {
           // I HAVE THE IMAGE URI HERE
        }

        renderCamera() {
           const isFocused = this.props.navigation.isFocused();

           if (!isFocused) {
               return null;
           } else if (isFocused) {
               return (
                  <CameraScreen callbackFromCamera={this.callBackPhoto}/>
               )
           }
        }

        render() {
           return (
             <View style={{ flex: 1 }}>
                {this.renderCamera()}
             </View>
          )
       }
  }

CameraScreen.js文件：

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  Switch,
  TouchableOpacity,
  Image,
  Dimensions
} from "react-native";
import { Camera, Permissions } from "expo";

export default class CameraScreen extends React.Component {
  state = {
    hasCameraPermission: null,
    type: Camera.Constants.Type.back,
    imageuri: ""
  };

  async componentWillMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === "granted" });
  }

  snap = async () => {
    if (this.camera) {
      let photo = await this.camera.takePictureAsync();
      if (photo) {
        this.setState({ imageuri: photo.uri });
      }
    }
  };

  render() {
    const { hasCameraPermission } = this.state;

    if (hasCameraPermission === null)
    {
      return <View />;
    }
    else if (hasCameraPermission === false)
    {
      return (
        <View>
          <Text>No Access to Camera</Text>
        </View>
      );
    }
    else
    {
      return (
        <View style={styles.container}>
            <View style={styles.cameraview}>
                {this.state.imageuri != "" ? (
                  this.props.callbackFromCamera(this.state.imageuri),
                  <Image
                    source={{uri: this.state.imageuri}}
                    style={styles.uploadedImage}
                    resizeMode="contain"
                  />
                ) : (
                  <Camera style={styles.camera} type={this.state.type} ref={ref => {this.camera = ref;}}>
                    <View style={styles.camerabuttonview}>
                      <TouchableOpacity style={styles.cameraButtons} onPress={this.snap}>
                        <Text style={{ fontSize: 18, marginBottom: 10, color: "white" }} >
                          Capture
                        </Text>
                      </TouchableOpacity>
                    </View>
                  </Camera>
                )}
            </View>
        </View>

      );
    }
  }
}

如何将图像uri从相机组件（或从CameraController.js）传递到onPress上的相机选项卡标题按钮？

Answer 1

CameraController.js文件：

  import CameraScreen from './camerascreen';
  import { withNavigationFocus } from "react-navigation";

   class CameraControler extends React.Component {
    callBackPhoto = (photo) => {
       // I CAN HAVE THE IMAGE URI HERE
    }

    renderCamera() {
       const isFocused = this.props.navigation.isFocused();

       if (!isFocused) {
           return null;
       } else if (isFocused) {
           return (
              <CameraScreen callbackFromCamera={() => this.callBackPhoto(photo)/>
           )
       }
    }

    render() {
       return (
         <View style={{ flex: 1 }}>
            {this.renderCamera()}
         </View>
      )
   }

}