0
179
Vistas¿Cómo puedo tomar el tamaño de la imagen original en el renderizado condicional de reactnavie?
La función PostList es un componente dentro de FlatList.
Cuando tengo un elemento.Imagen, quiero que la imagen ocupe ese tamaño con renderizado condicional y empujar elemento.contenido
Pero con mi código, no ocupa tanto como la imagen debido a item.content. como esta captura de pantalla, el verde es el ancho de la imagen
¿Cómo puedo empujar item.content cuando item.Image está presente mientras la imagen ocupa su ancho normal?
este es mi codigo
const PostList = ({item}: Props) => { return ( <> <View style={styles.main}> <View style={styles.min}> <View style={styles.middlecon}> <Text style={styles.content} numberOfLines={2} ellipsizeMode="tail"> {item.content} </Text> </View> </View> {item.Image && ( <View style={styles.rightcon}> <Image style={styles.Image} /> </View> )} </View> </> ); }; const styles = StyleSheet.create({ main: { borderBottomWidth: 0.3, borderColor: '#b0b4b8', paddingBottom: 30, flexDirection: 'row', justifyContent: 'space-between', }, min: {}, middlecon: {}, content: {}, rightcon: { backgroundColor: 'lightblue', }, Image: { width: 100, height: 30, backgroundColor: 'lightgreen', }, });1 Respuestas
Responde la pregunta0
También debe pasar la fuente de la Image al componente Imagen. Al igual que:
<Image style={styles.tinyLogo} source={require('@expo/snack-static/react-native-logo.png')} />Además, si no tiene la imagen almacenada localmente y en lugar de su uri, puede hacer lo siguiente:
<Image style={styles.tinyLogo} source={{ uri: 'https://reactnative.dev/img/tiny_logo.png', }} />Fuente: https://reactnative.dev/docs/image
Además, para asegurarse de que la imagen se mantenga dentro de la altura y el ancho que configuró en sus estilos, agregue resizeMode: contain como otro apoyo al componente Image .