【发布时间】：2018-05-18 08:32:11
【问题描述】：
我是本机反应的新手，我目前正在使用 ImagePicker 包制作图像/视频捕获应用程序。我有两个单独的按钮——一个用于图像捕捉，一个用于视频捕捉。我的问题是，目前我的图像显示在我的TouchableOpacity 按钮所在的同一页面上，但我需要使用StackNavigator 将它们显示在下一页（ThirdScreen.js）中。
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
PixelRatio,
TouchableOpacity,
Image,
} from 'react-native';
import ImagePicker from 'react-native-image-picker';
import Video from 'react-native-video';
import ThirdScreen from './ThirdScreen';
import Help from './app/components/Help';
const util = require('util');
class SecondScreen extends React.Component {
static navigationOptions ={
header: null,
};
//TODO: Link SecondScreen and PictureTaken together
//Research how to pass props to another component in react-native
render() {
const {navigate} = this.props.navigation;
return (
<View style={styles.container}>
<Help onPress = {()=> navigate("HelpSecond")}/>
<TouchableOpacity style={styles.button} onPress = {()=> navigate("Third")}>
<Text>Third Screen</Text>
</TouchableOpacity>
<ImagePickerProject/>
<VideoPickerProject/>
</View>
);
}
};
class ImagePickerProject extends Component<{}> {
state = {
ImageSource: null,
};
selectPhotoTapped(response) {
console.log('oh hi mark', response.fileName)
const options = {
maxWidth: 1000,
maxHeight: 1000,
storageOptions: {
skipBackup: true,
file: response.fileName,
}
};
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response.fileName);
if (response.didCancel) {
console.log('User cancelled photo picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
}
else {
let source = { uri: response.uri };
// You can also display the image using data:
// let source = { uri: 'data:image/jpeg;base64,' + response.data };
this.setState({
ImageSource: source
});
}
});
}
render() {
return (
<View style={styles.Image}>
{ this.state.ImageSource === null ?
<TouchableOpacity style={styles.button} onPress={this.selectPhotoTapped.bind(this)}>
<Text>Photo</Text>
</TouchableOpacity> :
<Image resizeMode={'cover'}
style={{ width: '100%', height: 400 }}
source={this.state.ImageSource}>
{this.state.file}
</Image>
}
</View>
);
}
};
class VideoPickerProject extends Component<{}> {
state = {
ImageSource: null,
};
selectPhotoTapped() {
const options = {
title: 'Video Picker',
takePhotoButtonTitle: 'Take Video...',
mediaType: 'video',
videoQuality: 'medium',
storageOptions: {
skipBackup: true
}
};
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled photo picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
}
else {
let source = { uri: response.uri };
// You can also display the image using data:
// let source = { uri: 'data:image/jpeg;base64,' + response.data };
this.setState({
ImageSource: source
});
}
});
}
render() {
return (
<View style={styles.Image}>
{ this.state.ImageSource === null ?
<TouchableOpacity style={styles.button} onPress={this.selectPhotoTapped.bind(this)}>
<Text>Video</Text>
</TouchableOpacity> :
<Video style={{ width: '100%', height: 400 }} source={this.state.ImageSource}
ref={(ref) => {
this.player = ref
}}
rate={1.0} // 0 is paused, 1 is normal.
volume={1.0} // 0 is muted, 1 is normal.
muted={false} // Mutes the audio entirely.
paused={false} // Pauses playback entirely.
resizeMode="cover" // Fill the whole screen at aspect ratio.*
repeat={true} // Repeat forever.
playInBackground={false} // Audio continues to play when app entering background.
playWhenInactive={false} // [iOS] Video continues to play when control or notification center are shown.
ignoreSilentSwitch={"ignore"} // [iOS] ignore | obey - When 'ignore', audio will still play with the iOS hard silent switch set to silent. When 'obey', audio will toggle with the switch. When not specified, will inherit audio settings as usual.
progressUpdateInterval={250.0} // [iOS] Interval to fire onProgress (default to ~250ms)
onLoadStart={this.loadStart} // Callback when video starts to load
onLoad={this.setDuration} // Callback when video loads
onProgress={this.setTime} // Callback every ~250ms with currentTime
onEnd={this.onEnd} // Callback when playback finishes
onError={this.videoError} // Callback when video cannot be loaded
onBuffer={this.onBuffer} // Callback when remote video is buffering
onTimedMetadata={this.onTimedMetadata}/>
}
</View>
);
}
};
const styles = StyleSheet.create({
container: {
flex:1,
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: '#1e1f20',
paddingLeft: 60,
paddingRight: 60,
paddingTop: 10,
},
ImageContainer: {
borderRadius: 0,
width: 800,
height: 800,
borderColor: '#9B9B9B',
borderWidth: 1 / PixelRatio.get(),
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#1e1f20',
},
button: {
width: 300,
height:100,
marginBottom: 10,
marginTop: 10,
backgroundColor: 'purple',
alignItems: 'center',
},
Image: {
width: 193, height: 110
}
});
export default SecondScreen;
【问题讨论】：
-
格式和拼写
标签： react-native stack-navigator react-native-image-picker