React native flexible header

Question

Я хотел бы иметь заголовок с заголовком слева и меню справа. Между текстом разной длины. Теперь я хочу, чтобы текст был вырезан, если он слишком длинный.

<View style={styles.header}> 
 
       <View style={styles.headline}> 
 
        <Text style={styles.headlineFluorine}>{"Fluorine "}</Text> 
 
        <Text style={styles.headlinePath}>{this.props.text}</Text> 
 
       </View> 
 
      
 
       <View ref="navi" style={styles.nav}> 
 
        <NavButton onPress={() => { this.props.navigator.push({id: 'drawings',}); }} text={textMyDrawings} /> 
 
        <NavButton onPress={() => { this.props.navigator.push({id: 'users',}); }} text={textUsers} /> 
 
        <NavButton onPress={() => { this.props.navigator.push({id: 'templates',}); }} text={textTemplates} /> 
 
        <NavButton onPress={() => { this.props.navigator.push({id: 'logout',}); }} text={textLogout} /> 
 
       </View> 
 
      </View>

header: { 
 
     flexDirection: 'row', 
 
     //justifyContent: 'space-around', 
 
     backgroundColor: '#DDDDDD', 
 
    }, 
 
          
 
    headline: { 
 
     flexDirection: 'row', 
 
     overflow: 'hidden', 
 
    }, 
 

 
    headlineFluorine: { 
 
     textAlign: 'left', 
 
     color: '#666666', 
 
     fontSize: 24, 
 
     margin: 10, 
 
    }, 
 
    
 
    headlinePath: { 
 
     fontSize: 18, 
 
     textAlign: 'left', 
 
     margin: 13, 
 
     overflow: 'hidden', 
 
    }, 
 
          
 
    nav: { 
 
     flexDirection: 'row', 
 
    },

Answer 1

попробовать подстрока только перед возвращением?

var txtlimit = 25;   
    var myheadertext = (this.props.text).length>txtlimit ? (this.props.text).substring(0,txtlimit) : this.props.text; 

затем

<Text style={styles.headlinePath}>{myheadertext}</Text> 

Answer 2

Добавить свойство numberOfLines

<Text style={styles.headlinePath} numberOfLines='1'>{this.props.text}</Text> 

... и установите ширину фиксированного предела.

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