Soy nuevo en reaccionar nativo, por lo que estoy seguro de que hay una solución muy obvia para esto, pero entre mis vistas flexibles en reaccionar nativo, hay una pequeña coma allí por alguna razón. No es muy obvio, pero aún notable. Me preguntaba
Con el zoom normal, apenas se nota: Captura de pantalla de mi aplicación nativa de reacción en Chrome con un zoom del 100 %
Pero con un zoom del 500 %, es muy obvio: Captura de pantalla de mi aplicación nativa de reacción en Chrome con un zoom del 500 %.
Y aquí está mi archivo index.js:
import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, SafeAreaView, Button, View, Image, TouchableOpacity} from 'react-native'; export default function App() { console.log("App executed!"); const handleTextPress = () =>console.log("Text Clicked!.com") return ( <SafeAreaView style={{ height: '100%'}}> <View style={{ height: '20%', width: "100%", flexDirection: "row" }}> <TouchableOpacity style={{flex: 1}}> <View style={{ backgroundColor: "dodgerblue", height: "100%" }}/> </TouchableOpacity>, <TouchableOpacity style={{flex: 0.1}}> <View style={{ backgroundColor: "black", height: "100%" }}/> </TouchableOpacity>, <TouchableOpacity style={{flex: 1}}> <View style={{ backgroundColor: "black", height: "100%" }}/> </TouchableOpacity> </View> <StatusBar style="auto" /> </SafeAreaView> ); } const styles = StyleSheet.create({ toptext: { color: "black" } });Mi pregunta ha sido respondida, gracias por toda su ayuda.
Prueba esto. Ha agregado , después de su TouchableOpacity
import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, SafeAreaView, Button, View, Image, TouchableOpacity} from 'react-native'; export default function App() { console.log("App executed!"); const handleTextPress = () =>console.log("Text Clicked!.com") return ( <SafeAreaView style={{ height: '100%'}}> <View style={{ height: '20%', width: "100%", flexDirection: "row" }}> <TouchableOpacity style={{flex: 1}}> <View style={{ backgroundColor: "dodgerblue", height: "100%" }}/> </TouchableOpacity> <TouchableOpacity style={{flex: 0.1}}> <View style={{ backgroundColor: "black", height: "100%" }}/> </TouchableOpacity> <TouchableOpacity style={{flex: 1}}> <View style={{ backgroundColor: "black", height: "100%" }}/> </TouchableOpacity> </View> <StatusBar style="auto" /> </SafeAreaView> ); } const styles = StyleSheet.create({ toptext: { color: "black" } });