Question

我希望连续排列3个视图： |图标| |标题| |按钮| 标题可以是多行。按钮是0-3按钮，所以我们不知道它们的宽度。

现在问题是，如果我在标题中有多行，则按钮被切断。我怎样才能解决这个问题并确保按钮始终在屏幕上并且标题只剩下剩余的空间？

On this screenshot 2 listitems are visible. Both should have 3 buttons on the right, but with the long title in the second row, the buttons are cut off

        render() {
        return (
            <TouchableHighlight style={styles.view} underlayColor={'#eee'} onPress={this.props.navigateToDetails}>
                <View style={{flex: 1}}>
                    <View style={styles.header}>
                        <View style={styles.headerTitle}>
                           <MaterialIcons style={styles.icon} name={"worker"}/>
                            <MentionsText style={styles.title}
                            >
                                {this.props.siteVisitNote.title}
                            </MentionsText>
                        </View>
                        <View style={styles.buttons}>
                            <FontAwesomeIcons style={styles.icon} name="tag"/>
                            {Utils.objectExists(this.props.siteVisitNote.attachments) || true ?
                                <FontAwesomeIcons style={styles.icon} name="paperclip"/> : null}
                            {Utils.objectExists(this.props.siteVisitNote.images) || true ?
                                <FontAwesomeIcons style={styles.icon} name="picture-o"/> : null}
                        </View>
                    </View>
                    <MentionsText style={styles.text}
                    >{this.getText()}</MentionsText>
                </View>
            </TouchableHighlight>
        )
    }
}

const styles = StyleSheet.create({
    header: {
        flexDirection: 'row',
        justifyContent: "space-between",
    },
    headerTitle: {
        flexDirection: 'row'
    },
    view: {
        flex: 1,
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: '#efeff4',
        padding: 8,
        minHeight: 40,
    },
    buttons: {
        flexDirection: "row",
        alignSelf: 'flex-end',
    },
    icon: {
        fontSize: 20,
        paddingRight: 5,
        color: "#333333",
        padding: 8
    },
    title: {
        color: "#333333",
        fontSize: 14,
        fontWeight: 'bold',
        padding: 8,
    },
    text: {
        color: "#333333",
        fontSize: 14,
        padding: 8
    }
});

谢谢！

Answer 1

将In [34]: df['ts']//10*10 Out[34]: 0 34200.0 1 34200.0 2 34200.0 3 34200.0 4 34200.0 5 34200.0 6 34200.0 7 34200.0 8 34200.0 9 34200.0 ... 237 34230.0 238 34230.0 239 34230.0 240 34230.0 241 34230.0 242 34230.0 243 34230.0 244 34230.0 245 34230.0 246 34230.0 Name: ts, Length: 247, dtype: float64添加到flex: 1和headerTitle。

如果这不起作用，请在此处查看此布局的工作示例，您可以对其进行比较。

https://gist.github.com/WilliamIPark/2ad3ecf47c5c1e559086e4b10d0cf018

title

将3个动态视图对齐在一行中

1 个答案: