import React, { useState, useEffect } from 'react'
import { StyleSheet, Text, Image, Button, View, ScrollView, TouchableOpacity, ImageBackground, TextInput } from 'react-native'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Feather from 'react-native-vector-icons/Feather';
import BottomSheet from 'reanimated-bottom-sheet';
import Animated from 'react-native-reanimated';
import ImagePicker from 'react-native-image-crop-picker';
class FormActivity3 extends React.Component {
static navigationOptions = {
title: "事故快报 HSE Flash Report",
headerStyle: {
backgroundColor: "#73C6B6"
}
};
constructor(props) {
super(props)
this.navigate = this.props.navigation.navigate;
this.state = {
image: 'https://api.adorable.io/avatars/80/[email protected]'
}
};
renderInner = () => (
<View style={styles.panel}>
<View style={{ alignItems: 'center' }}>
<Text style={styles.panelTitle}>Upload Photo</Text>
<Text style={styles.panelSubtitle}>Choose Your Profile Picture</Text>
</View>
<TouchableOpacity style={styles.panelButton} onPress={this.takePhotoFromCamera}>
<Text style={styles.panelButtonTitle}>Take Photo</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.panelButton} onPress={this.choosePhotoFromLibrary}>
<Text style={styles.panelButtonTitle}>Choose From Library</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.panelButton}
onPress={() => this.bs.current.snapTo(1)}>
<Text style={styles.panelButtonTitle}>Cancel</Text>
</TouchableOpacity>
</View>
);
renderHeader = () => (
<View style={styles.header}>
<View style={styles.panelHeader}>
<View style={styles.panelHandle} />
</View>
</View>
);
takePhotoFromCamera = () => {
ImagePicker.openCamera({
compressImageMaxWidth: 300,
compressImageMaxHeight: 300,
cropping: true,
compressImageQuality: 0.7
}).then(image => {
console.log(image);
setImage(image.path);
this.bs.current.snapTo(1);
});
}
choosePhotoFromLibrary = () => {
ImagePicker.openPicker({
width: 300,
height: 300,
cropping: true,
compressImageQuality: 0.7
}).then(image => {
console.log(image);
setImage(image.path);
this.bs.current.snapTo(1);
});
}
bs = React.createRef();
fall = new Animated.Value(1);
render() {
return (
<ScrollView style={styles.container}>
{/* PART 3*/}
<View style={styles.view}>
<Text style={styles.title}>事故状况略图(贴照片,或画示意图)</Text>
<Text style={styles.title}>Sketch or picture of Incident/Accident</Text>
</View>
<View style={styles.view}>
<BottomSheet
ref={this.bs}
snapPoints={[330, 0]}
renderContent={this.renderInner}
renderHeader={this.renderHeader}
initialSnap={1}
callbackNode={this.fall}
enabledGestureInteraction={true} />
<Animated.View style={{ margin: 20, opacity: Animated.add(0.1, Animated.multiply(this.fall, 1.0)), }}>
<TouchableOpacity onPress={() => this.bs.current.snapTo(0)}>
<View
style={{
height: 100,
width: 100,
borderRadius: 15,
justifyContent: 'center',
alignItems: 'center',
}}>
<ImageBackground
source={{
uri: this.state.image
}}
style={{ height: 100, width: 100 }}
imageStyle={{ borderRadius: 15 }}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Icon
name="camera"
size={35}
color="#fff"
style={{
opacity: 0.7,
alignItems: 'center',
justifyContent: 'center',
borderWidth: 1,
borderColor: '#fff',
borderRadius: 10,
}}
/>
</View>
</ImageBackground>
</View>
</TouchableOpacity>
</Animated.View>
</View>
<View style={styles.viewB}>
<Button style={styles.button} color="#73C6B6" title="Next" onPress={() => this.navigate("Form3", this.state)} />
</View>
</ScrollView >
)
}
}
export default FormActivity3
const styles = StyleSheet.create({
container: {
margin: 5,
},
row: {
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'center'
},
row1: {
flexDirection: 'row',
alignItems: 'center',
},
input: {
borderBottomColor: 'black',
borderBottomWidth: 0.2,
height: 37,
width: 200,
padding: 2,
margin: 5,
alignItems: 'flex-end'
},
input1: {
borderBottomColor: 'black',
borderBottomWidth: 0.2,
height: 37,
width: '100%',
padding: 2,
margin: 5,
alignItems: 'flex-end'
},
title: {
fontWeight: "bold",
textAlign: 'center',
fontSize: 20,
},
view: {
alignItems: 'center',
marginTop: 20
},
viewB: {
alignItems: 'center',
marginTop: 20,
marginBottom: 20
},
view2: {
marginTop: 20
},
view3: {
marginTop: 10
},
text: {
margin: 5,
fontWeight: "bold",
},
text2: {
margin: 5,
},
input2: {
borderColor: 'black',
borderWidth: 0.2,
height: 37,
padding: 2,
margin: 5,
alignItems: 'flex-end'
}, commandButton: {
padding: 15,
borderRadius: 10,
backgroundColor: '#FF6347',
alignItems: 'center',
marginTop: 10,
},
panel: {
padding: 20,
backgroundColor: '#FFFFFF',
paddingTop: 20,
// borderTopLeftRadius: 20,
// borderTopRightRadius: 20,
// shadowColor: '#000000',
// shadowOffset: {width: 0, height: 0},
// shadowRadius: 5,
// shadowOpacity: 0.4,
},
header: {
backgroundColor: '#FFFFFF',
shadowColor: '#333333',
shadowOffset: { width: -1, height: -3 },
shadowRadius: 2,
shadowOpacity: 0.4,
// elevation: 5,
paddingTop: 20,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
panelHeader: {
alignItems: 'center',
},
panelHandle: {
width: 40,
height: 8,
borderRadius: 4,
backgroundColor: '#00000040',
marginBottom: 10,
},
panelTitle: {
fontSize: 27,
height: 35,
},
panelSubtitle: {
fontSize: 14,
color: 'gray',
height: 30,
marginBottom: 10,
},
panelButton: {
padding: 13,
borderRadius: 10,
backgroundColor: '#FF6347',
alignItems: 'center',
marginVertical: 7,
},
panelButtonTitle: {
fontSize: 17,
fontWeight: 'bold',
color: 'white',
},
action: {
flexDirection: 'row',
marginTop: 10,
marginBottom: 10,
borderBottomWidth: 1,
borderBottomColor: '#f2f2f2',
paddingBottom: 5,
},
actionError: {
flexDirection: 'row',
marginTop: 10,
borderBottomWidth: 1,
borderBottomColor: '#FF0000',
paddingBottom: 5,
},
textInput: {
flex: 1,
paddingLeft: 10,
color: '#05375a',
},
})
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent