反应本机灵活 header

Question

我想要一个 header，左边是标题，右边是菜单。 Between 是一段不同长度的文本。如果文本太长，我现在要剪掉它。

<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

添加 numberOfLines 属性

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

...并将宽度设置为固定限制。

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

Answer 2

尝试 return 之前的子字符串？

    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>

反应本机灵活 header

React native flexible header

react-native