React Native如何在5 col佈局中呈現imgs

Question

我正在構建我的第一個反應原生應用程序，並且無法在使用flex構建的5 col佈局內渲染圖像。在網絡上，我會通過給它們100％的容器寬度並添加margin 0 auto來使圖像響應。這不適用於反應本機，所以我想知道如果他們是不同的設計原則，如何使移動和平板電腦應用程序的反應本機響應？

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; 

我只能通過指定高度和寬度來呈現整個imgs，我還沒有能夠讓它們動態地填充它們的容器。這在平板電腦上很好，但手機上的imgs重疊

Answer 1

使用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

您可以使用來自react native的Dimensions元素來計算所需圖像的寬度/高度，以獲取窗口寬度。

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