Browse Source

imagePicker

master
analuizaff 4 years ago
parent
commit
394f64295d
  1. 41
      src/app/components/ImageInput.js
  2. 6
      src/app/screens/PluviometerSharingDataScreen.js

41
src/app/components/ImageInput.js

@ -19,8 +19,9 @@ function ImageInput({ imageUri, onChangeImage }) {
requestPermission(); requestPermission();
//requestPermissionCamera(); //requestPermissionCamera();
}, []); }, []);
const [modalVisible, setModalVisible] = useState(false);
/* const requestPermissionCamera = async () => {
const requestPermissionCamera = async () => {
const { granted } = await Permissions.askAsync(Permissions.CAMERA); const { granted } = await Permissions.askAsync(Permissions.CAMERA);
if(granted) { if(granted) {
launchCamera(); launchCamera();
@ -38,7 +39,7 @@ function ImageInput({ imageUri, onChangeImage }) {
} catch (error) { } catch (error) {
console.log("Erro ao ler imagem", error); console.log("Erro ao ler imagem", error);
} }
};*/
};
const requestPermission = async () => { const requestPermission = async () => {
const { granted } = await ImagePicker.requestCameraRollPermissionsAsync(); const { granted } = await ImagePicker.requestCameraRollPermissionsAsync();
@ -47,7 +48,7 @@ function ImageInput({ imageUri, onChangeImage }) {
}; };
const handlePress = () => { const handlePress = () => {
if (!imageUri) launchImageLibrary();
if (!imageUri) setModalVisible(true);
else else
Alert.alert("Deletar", "Deseja deletar esta imagem?", [ Alert.alert("Deletar", "Deseja deletar esta imagem?", [
{ text: "Sim", onPress: () => onChangeImage(null) }, { text: "Sim", onPress: () => onChangeImage(null) },
@ -78,15 +79,43 @@ function ImageInput({ imageUri, onChangeImage }) {
size={40} size={40}
/> />
)} )}
{imageUri && (
<Image source={{ uri: imageUri }} style={styles.image} />
)}
{imageUri && <Image source={{ uri: imageUri }} style={styles.image} />}
</View> </View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
<View >
<Modal style={styles.centeredView}
animationType="slide"
transparent={true}
visible={modalVisible}>
<TouchableWithoutFeedback onPress={() => {
setModalVisible(!setModalVisible);
}}>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<View>
<Text style={styles.modalLabel}>Selecione uma imagem</Text>
<TouchableOpacity style={{ width: 300 }} onPress={requestPermissionCamera}>
<Text style={styles.modalText}>Câmera</Text>
</TouchableOpacity>
<TouchableOpacity style={{ width: 300 }} onPress={launchImageLibrary}>
<Text style={styles.modalText}>Galeria</Text>
</TouchableOpacity>
</View>
<TouchableOpacity style={{ width: 300 }} onPress={() => { setModalVisible(false) }}>
<Text style={{ fontWeight: 'bold', marginTop: 20, fontSize: 14, textAlign: 'center' }}>
Cancelar
</Text>
</TouchableOpacity>
</View>
</View>
</TouchableWithoutFeedback>
</Modal>
</View>
</View> </View>
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
alignItems: "center", alignItems: "center",

6
src/app/screens/PluviometerSharingDataScreen.js

@ -102,7 +102,7 @@ function PluviometerSharingDataScreen(props) {
}} }}
validationSchema={validationSchema} validationSchema={validationSchema}
> >
<View style={{ marginTop: 30 }}>
<View style={{ marginTop: 30, flex: 1 }}>
<Text style={styles.labelStyle}> <Text style={styles.labelStyle}>
Quantidade de chuva: Quantidade de chuva:
</Text> </Text>
@ -111,7 +111,7 @@ function PluviometerSharingDataScreen(props) {
maxLength={200} maxLength={200}
name="pluviometer" name="pluviometer"
placeholder="Digite a quantidade de chuva" placeholder="Digite a quantidade de chuva"
width={280}
flex= {1}
/> />
</View> </View>
@ -213,6 +213,8 @@ function PluviometerSharingDataScreen(props) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
padding: 10, padding: 10,
flex: 1
}, },
image: { image: {
width: 85, width: 85,

Loading…
Cancel
Save