안드로이드와 iOS에서 네이티브 반응을 보이는 라인 수를 고정

Question

텍스트와 제목의 목록을 만들고 각각의 라인 수 = 2 -> 총 라인 수가 4가되도록 수정해야합니다. iOS 시뮬레이터에서 잘 작동합니다. 문제는 이제 안드로이드 (에뮬레이터와 실제 장치)에서 총 4 개가 아닌 2 개의 라인 만 얻는다는 것입니다. 여기 내가 사용하는 코드입니다 :

_renderItem(item) { 
     return ( 
<View> 
     <Text numberOfLines={2} 
      style={styles.name}>{item.name.toUpperCase()}</Text> 

     <Text numberOfLines={2} 
      style={styles.definition}>{item.definition}</Text> 
    </View> 
);} 

및

render() { 
     return (
       <ListView 
        dataSource={this.state.dataSource} 
        renderRow={this._renderItem.bind(this)} 
        enableEmptySections={true} 
        style={styles.listView}/> 
     ) 
    } 

나는 안드로이드 목록보기를 생각하고는 라인의 고정 된 수를 가지고 있으며, numberOfLines에 따라 변경 될 수 없습니다에 .. 어떤 제안 후 텍스트가 정적 만들기 및 높이를 고정 :

_renderItem(item) { 
     return (
      <View style={styles.listItem}> 

         <Text numberOfLines={2} style={{ fontSize: 14, lineHeight: 15 }}> 
          &gt;"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
         </Text> 

         <Text 
          numberOfLines={2} 
          style={{ fontSize: 14, color: 'red', lineHeight: 15 }}> 
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
         </Text> 

      </View> 
     ); 
    } 

사진은 내가 0123은 lineHeight 높이를 고정 후 도착

Answer 1

아마도 고정 된 수의 줄을 가지고 더 좋은 방법은 height 스타일을 사용하는 것입니다. Text parrent에 height 스타일을 추가하십시오. numberOfLines은 최소 줄 수가 아닌 최대 줄 수입니다.

업데이트 :

_renderItem(item) { 
return (
    <View style={{ height: 60 }}> 
    <Text numberOfLines={2} style={{ fontSize: 14, lineHeight: 15 }}> 
     &gt;"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
    </Text> 

    <Text 
     numberOfLines={2} 
     style={{ fontSize: 14, color: 'red', lineHeight: 15 }}> 
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
    </Text> 
    </View> 
); 

}