長文本將屏幕上的其他元素與原生對象

我試圖在使用Flexbox的React-Native中構建佈局，並且在文本很長時遇到了問題。我想要的佈局看起來像這樣：長文本將屏幕上的其他元素與原生對象

然而，當藍色文本變得很長，這必將推動日期關閉屏幕的右側是這樣的：

我故意將文本留在1行上。我想要的是儘可能擴大藍色文本而不會使文本縮小。我是RN的新手，我在CSS方面的工作非常有限，所以我沒有太多的經驗來做這種事情。這裏是我的樣式表代碼：

const styles = StyleSheet.create({ 
    textContainer: { 
    flex: 1 
    }, 
    separator: { 
    height: 1, 
    backgroundColor: '#dddddd' 
    }, 
    title: { 
    fontSize: 25, 
    fontWeight: 'bold', 
    color: '#48BBEC' 
    }, 
    subtitle: { 
    fontSize: 20, 
    color: '#656565' 
    }, 
    dateContainer: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'flex-end' 
    }, 
    rowContainer: { 
    flexDirection: 'row', 
    padding: 10 
    } 
});

最後，我的佈局代碼：

<TouchableHighlight 
    underlayColor='#dddddd'> 
     <View style={styles.rowContainer}> 
      <View cstyle={styles.textContainer}> 
      <Text numberOfLines={1} style={styles.title}>{rowData.name}</Text> 
      <Text style={styles.subtitle}>{rowData.teacher}</Text> 
      </View> 
      <View style={styles.dateContainer}> 
      <Text style={styles.subtitle}>{result}</Text> 
      </View> 
     <View style={styles.separator}/> 
     </View> 
    </TouchableHighlight>

來源

2017-07-03 beyerss

只是一個建議 - 嘗試給dateContainer一個最小寬度值？ – sol

我試過了，但隨後藍色文本在日期文本 – beyerss

@beyerss不知道我明白什麼是必需的功能，當文本太長時會發生什麼？ –

你必須要截斷（即使是100％的文本組件上設置width它的容器是我想象的柔性盒子），並且還將numberOfLines prop設置爲1（或者您希望允許的許多行數）。請參閱關於橢圓模式和行數的文檔。什麼我上面解釋

https://facebook.github.io/react-native/docs/text.html#ellipsizemode

代碼示例：

<View style={{display: 'flex', flexDirection: 'row', overflow: 'hidden'}}> 
    <View> 
     <Text 
     numberOfLines={1} 
     style={{width: '100%'}}>Text here that I want to truncate</Text> 
     <Text 
     numberOfLines={1} 
     style={{width:'100%'}}>Another line of text</Text> 
    </View> 
    <View style={{width: 120}}> 
     <Text>01/01/2017</Text> 
    </View> 
</View>

如果您仍然有問題，有可能你需要在你的文本組件樣式也使用overflow: hidden。

來源

2017-07-13 19:20:07

我無法得到這個工作，我已經嘗試在文本組件中使用或不使用overflow：hidden 。 – Grav

要解決您的問題，請從dateContainer中刪除flex: 1，它不會從屏幕上消失。

dateContainer: { 
    //flex: 1, line removed 
    justifyContent: 'center', 
    alignItems: 'flex-end' 
},

添加flex: 1您rowContainer如下：

rowContainer: { 
    flex: 1, //Line added 
    flexDirection: 'row', 
    padding: 10 
}

來源

2017-10-23 07:53:27

我最終通過測量父視圖的寬度（與onLayout回調），然後將文本的父的寬度設置爲解決這個其餘的。

這意味着組件中有一些狀態，但可以將其轉換爲具有左側動態大小組件和右側靜態組件的常規組件。

來源

2017-12-08 22:40:42 Grav

長文本將屏幕上的其他元素與原生對象

回答

相關問題