android - 修复 android 和 iOS 原生 react 中的行数

Question

我需要制作一个文本和标题列表，并为每个行数修正 = 2 --> 所以总行数 = 4。我做到了，它在 iOS 模拟器中运行良好。现在的问题是我在 android(模拟器和真实设备)中总共只有两行而不是 4 行。这是我使用的代码:

 _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}/>
        )
    }

我认为 android 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>
        );
    }

固定高度和行高后得到的图片

Answer 1

也许固定行数的更好方法是使用 height 样式。将 height 样式添加到 Text 的父级。 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>
);