네이티브, 아동의 너비에 백분율로 반응

Question

여기 내 코드입니다. 제품보기가 부모의 너비의 90 %를 차지하기를 원합니다. 그러나 아래 설정은 작동하지 않습니다.

... 어떤 아이디어는 어떻게 치수를 사용하지 않고 을 달성하기 위해?

return (
     <LazyloadScrollView 
      style={styles.container} 
      contentContainerStyle={styles.content} 
      name="scrollImage" > 
      {list.map((product, i) => <View key={i} style={styles.product}> 
      <LazyloadImage 
       host="scrollImage" 
       style={styles.image} 
       source={image} 
       animation={false}> 
       <View style={styles.id}> 
       <Text style={styles.idText}>{product.id}</Text> 
       </View> 
      </LazyloadImage> 
      </View>) 
      } 
     </LazyloadScrollView> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: '#ffffff' 
    }, 
    content: { 
    paddingTop: 20, 
    justifyContent: 'center', 
    alignItems: 'center', 
     backgroundColor: '#eee' 
    }, 
    product: { 
     flex: 0.9, 
     marginTop: 5, 
     flexDirection: 'row', 
     alignItems: 'center', 
     backgroundColor: '#FFFFFF' 
    }, 

Answer 1

Dimensions을 사용하지 않으시겠습니까? 앱이 반응 형이 될 수 있습니다.

당신은 크기를 사용하는 컨테이너에 어떤 스타일의 설정을 시도하지 않으려하며, 예를 들어, 아이들의가 있기 때문에 작동하는지 모르겠어요 패딩

container: { 
    backgroundColor: '#ffffff', 
    alignSelf: 'stretch', 
    padding: 30 
    } 

으로 전체 너비를 한 경우 테스트하기 위해 코드의 나머지 부분을 게시해야하지만 작동시키기 전까지는 스타일 및 플렉스 속성을 계속 사용하면서 오래 걸리지 않아야합니다. null`와`높이 : 당신은`폭을 지정해야합니다 Image` LazyLoadImage``에 대해 만의 official layout props docs from react native

그리고 css tricks guide to flexbox