React Native, wie Imgs in 5 Spaltenlayout zu rendern

Question

Ich baue meine erste react-native App und habe Probleme beim Rendern von Bildern in einem 5-col Layout mit Flex gebaut. Im Web würde ich die Bilder reaktionsfähig machen, indem ich ihnen eine Breite von 100% ihres Containers gebe und Rand 0 automatisch hinzufüge. Dies funktioniert nicht bei react-native, also frage ich mich, ob es unterschiedliche Design-Prinzipien gibt, wie man reaktions-native Responsive sowohl für mobile als auch für Tablet-Apps macht.

import React, { Component } from 'react'; 
import { Image } from 'react-native'; 
import { Text, Container, Content, View } from 'native-base'; 

class Question extends Component { 
    render() { 
     const { 
      widgetPredictor, 
      widgetPredictor__text, 
      widgetPredictor__imgs, 
      widgetPredictor__heading, 
      widgetPredictor__count, 
      widgetPredictor__img__result, 
      widgetPredictor__img__arrow, 
      widgetPredictor__img__size 
     } = styles; 

     const { question, index, total, showPreviousQuestion, showNextQuestion } = this.props; 

     return (
      <Container> 
       <Container style={[widgetPredictor, widgetPredictor__text]}> 
        <Text style={widgetPredictor__heading}>{ question.label }</Text> 
        <Text style={widgetPredictor__count}>{ index + 1 } of { total }</Text> 
       </Container> 
       <Container style={[widgetPredictor, widgetPredictor__imgs]}> 
        <View style={widgetPredictor__img__arrow}> 
         <Image 
          style={widgetPredictor__img__size} 
          source={require('../../assets/imgs/left.png')} 
         /> 
        </View> 
        <View style={widgetPredictor__img__result}> 
         <Image 
          style={widgetPredictor__img__size} 
          source={require('../../assets/imgs/Huddersfield.png')} 
         /> 
        </View> 
        <View style={widgetPredictor__img__result}> 
         <Image 
          style={widgetPredictor__img__size} 
          source={require('../../assets/imgs/Draw.png')} 
         /> 
        </View> 
        <View style={widgetPredictor__img__result}> 
         <Image 
          style={widgetPredictor__img__size} 
          source={require('../../assets/imgs/Wednesday.png')} 
         /> 
        </View> 
        <View style={widgetPredictor__img__arrow}> 
         <Image 
          style={widgetPredictor__img__size} 
          source={require('../../assets/imgs/right.png')} 
         /> 
        </View> 
       </Container> 
      </Container> 
     ); 
    } 
} 

const styles = { 
    widgetPredictor: { 
     flexDirection: "row", 
     alignItems: "center", 
     justifyContent: "space-between", 
     height: 108 
    }, 
    widgetPredictor__text: { 
     backgroundColor: "red" 
    }, 
    widgetPredictor__imgs: { 
     backgroundColor: "blue" 
    }, 
    widgetPredictor__heading: { 
     color: "#141414", 
     fontFamily: "Avenir", 
     fontSize: 12, 
     fontWeight: "500", 
     marginBottom: 10, 
     paddingLeft: "3%", 
     paddingRight: "3%" 
    }, 
    widgetPredictor__count: { 
     color: "#C8D6DE", 
     fontFamily: "Avenir", 
     fontSize: 8, 
     fontWeight: "900", 
     marginBottom: 10, 
     paddingLeft: "3%", 
     paddingRight: "3%" 
    }, 
    widgetPredictor__img__result: { 
     borderRadius: 100, 
     paddingLeft: "3%", 
     paddingRight: "3%", 
     flex: 2 
    }, 
    widgetPredictor__img__arrow: { 
     paddingLeft: "3%", 
     paddingRight: "3%", 
     flex: 1 
    }, 
    widgetPredictor__img__size: { 
     height: 70, 
     width: 70 
    } 
}; 

export default Question; 

Ich habe nur in der Lage gewesen, durch die Angabe eine Höhe und Breite der ganze imgs zu machen, ich habe nicht in der Lage gewesen, sie dynamisch füllen ihre Behälter zu machen. Dies ist in Ordnung auf dem Tablet, aber die imgs Überlappung auf Handy

Answer 1

Verwendung resizeMode='contain':

const styles = StyleSheet.create({ 
    image: { 
     flex: 1, 
    } 
}); 

render() { 
    let mode = 'contain'; 
    return (
     <View style={{flexDirection: 'row', height: 100}}> 
      <Image source={imageClose} resizeMode={mode} style={styles.image} /> 
      <Image source={imageClose} resizeMode={mode} style={styles.image} /> 
      <Image source={imageClose} resizeMode={mode} style={styles.image} /> 
      <Image source={imageClose} resizeMode={mode} style={styles.image} /> 
      <Image source={imageClose} resizeMode={mode} style={styles.image} /> 
      <Image source={imageClose} resizeMode={mode} style={styles.image} /> 
      <Image source={imageClose} resizeMode={mode} style={styles.image} /> 
     </View> 
    ); 
} 

Answer 2

Sie können die erforderliche Breite/Höhe der Bilder berechnen, indem Sie das Dimensions Element von reagieren native verwenden, um die Fensterbreite zu erhalten.

const {height, width} = Dimensions.get('window'); 
const myImageWidth = width/5;