Thiết kế website giá rẻ

Question

The following page will have an image input from the gallery, it works fine on the Web version, but does not on Android and iOS. On all platforms I’m able to open the libraries, pick and edit an image.

below the full app code, problem in FichaPage section:

import React, { useState } from 'react';
import { View, Text, TextInput, StyleSheet, TouchableOpacity, Alert, Image, Platform } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/native';
import * as ImagePicker from 'expo-image-picker';

const Stack = createStackNavigator();

const HomePage = () => {
  const navigation = useNavigation();

  const navigateToParametros = () => {
    navigation.navigate('Parametros');
  };

  return (
    <View style={styles.container}>
      <View style={styles.headerContainer}>
        <Text style={styles.header}>GURPS 3E Companion</Text>
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity style={styles.button} onPress={navigateToParametros}>
          <Text style={styles.buttonText}>Nova Ficha</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Editar Ficha</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Gerenciar Fichas</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Importar/Exportar Ficha</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const ParametrosPage = () => {
  const [pontosPersonagemIniciais, setPontosPersonagemIniciais] = useState('');
  const [recursosIniciais, setRecursosIniciais] = useState('');
  const navigation = useNavigation();

  const handleNext = () => {
    // Lógica para o botão "Próximo"
    // Salvar os valores nos estados locais
    // Aqui, você pode validar e manipular os valores conforme necessário
    // Por exemplo, você pode converter os valores para inteiros usando parseInt()

    setPontosPersonagemIniciais(pontosPersonagemIniciais);
    setRecursosIniciais(recursosIniciais);

    // Navegar para a página de Ficha
    navigation.navigate('Ficha', {
      pontosPersonagemIniciais,
      recursosIniciais,
    });
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Parâmetros</Text>
      <View style={styles.inputContainer}>
        <View style={styles.inputGroup}>
          <Text style={styles.inputTitle}>Pontos de Personagem:</Text>
          <TextInput
            style={styles.input}
            placeholder="100"
            keyboardType="numeric"
            value={pontosPersonagemIniciais}
            onChangeText={setPontosPersonagemIniciais}
          />
        </View>
        <View style={styles.inputGroup}>
          <Text style={styles.inputTitle}>Recursos Iniciais:</Text>
          <TextInput
            style={styles.input}
            placeholder="1000"
            keyboardType="numeric"
            value={recursosIniciais}
            onChangeText={setRecursosIniciais}
          />
        </View>
      </View>
      <TouchableOpacity style={styles.button} onPress={handleNext}>
        <Text style={styles.buttonText}>Próximo</Text>
      </TouchableOpacity>
    </View>
  );
};

const FichaPage = ({ route }) => {
  const { pontosPersonagemIniciais, recursosIniciais } = route.params;
  const [nome, setNome] = useState('');
  const [raca, setRaca] = useState('');
  const [imagem, setImagem] = useState(null);

  // Função para lidar com o upload de imagem
  **const handleImageUpload = async () => {
    try {
      let result;
      if (Platform.OS === 'web') {
        // Para a versão web, vamos abrir a galeria de imagens usando uma entrada de arquivo
        document.getElementById('imageInput').click();
      } else {
        // Para dispositivos móveis, vamos usar a API de seleção de imagens padrão do React Native
        result = await ImagePicker.launchImageLibraryAsync({
          mediaTypes: ImagePicker.MediaTypeOptions.Images,
          allowsEditing: true,
          aspect: [4, 3],
          quality: 1,
        });
      }

      if (result && !result.cancelled) {
        setImagem(result.uri);
      }
    } catch (error) {
      console.log('Erro ao selecionar a imagem:', error);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Ficha</Text>

      {/* Seção: IDENTIDADE */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>IDENTIDADE</Text>
        {/* Campos de texto: Nome e Raça */}
        <View style={styles.inputGroup}>
          <Text style={styles.inputTitle}>Nome:</Text>
          <TextInput
            style={styles.input}
            placeholder="Nome do personagem"
            value={nome}
            onChangeText={setNome}
          />
        </View>
        <View style={styles.inputGroup}>
          <Text style={styles.inputTitle}>Raça:</Text>
          <TextInput
            style={styles.input}
            placeholder="Raça do personagem"
            value={raca}
            onChangeText={setRaca}
          />
        </View>
        {/* Campo para upload de imagem */}
        <TouchableOpacity style={styles.imageUploadButton} onPress={handleImageUpload}>
          <Text style={styles.buttonText}>Selecionar Imagem</Text>
        </TouchableOpacity>
        {/* Exibição da imagem selecionada */}
        {imagem && <Image source={{ uri: imagem }} style={styles.image} />}
        {Platform.OS === 'web' && (
          <input
            type="file"
            id="imageInput"
            accept="image/*"
            style={{ display: 'none' }}
            onChange={(e) => {
              const file = e.target.files[0];
              if (file) {
                setImagem(URL.createObjectURL(file));
              }
            }}
          />
        )}
      </View>

      {/* Seção: ATRIBUTOS */}
      {/* ... */}
    </View>
  );
};


const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomePage} />
        <Stack.Screen name="Parametros" component={ParametrosPage} />
        <Stack.Screen name="Ficha" component={FichaPage} options={{ headerShown: false }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    paddingHorizontal: 20,
  },
  headerContainer: {
    justifyContent: 'flex-start',
    alignItems: 'center',
    marginTop: 30,
  },
  header: {
    fontSize: 32,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  buttonContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    width: '70%',
  },
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#007bff',
    borderRadius: 5,
    paddingVertical: 15,
    paddingHorizontal: 10,
    marginBottom: 10,
    width: '100%',
  },
  buttonText: {
    fontSize: 18,
    color: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  inputContainer: {
    width: '100%',
  },
  inputGroup: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
  },
  inputTitle: {
    fontSize: 18,
    marginRight: 10,
    width: 150,
  },
  input: {
    height: 40,
    flex: 1,
    borderColor: 'gray',
    borderWidth: 1,
    paddingHorizontal: 10,
  },
  section: {
    marginTop: 20,
    marginBottom: 20,
    width: '100%',
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
    paddingBottom: 10,
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  imageUploadButton: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#007bff',
    borderRadius: 5,
    paddingVertical: 15,
    paddingHorizontal: 10,
    marginTop: 20,
    width: '100%',
  },
  image: {
    width: '100%',
    height: 200,
    resizeMode: 'contain',
    marginTop: 20,
  },
});

export default App;

Tried adapting the section to show the image without success.

Thiết kế website giá rẻ

Danh mục

React Native – Selected image is displayed on web version, but not on Android and iOs