3行の動的ビューを1行に整列します

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

flex: 1からheaderTitleおよびtitleを追加します。

これでうまくいかない場合は、私が比較できるこのレイアウトの実例を見て​​ください。

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

import React, { Component } from 'react'; 
import { 
    StyleSheet, 
    Text, 
    View, 
    ScrollView 
} from 'react-native'; 

export default class App extends Component { 
    render() { 
    return (
     <ScrollView 
     style={{ backgroundColor: '#edf2f9'}} 
     contentContainerStyle={styles.container} 
     > 
     <View style={styles.card}> 
      <View style={styles.header}> 
      <View style={styles.iconTitle}> 
       <View style={styles.icon} /> 
       <Text>Hello world</Text> 
      </View> 
      <View style={styles.buttonWrap}> 
       <View style={styles.button} /> 
       <View style={styles.button} /> 
       <View style={styles.button} /> 
      </View> 
      </View> 
      <View> 
      <Text> 
      Some other content... 
      </Text> 
      </View> 
     </View> 

     <View style={styles.card}> 
      <View style={styles.header}> 
      <View style={styles.iconTitle}> 
       <View style={styles.icon} /> 
       <Text style={styles.title}> 
       Hello world this is some really long title right here, that 
       goes on and on and on. And then some! 
       </Text> 
      </View> 
      <View style={styles.buttonWrap}> 
       <View style={styles.button} /> 
       <View style={styles.button} /> 
       <View style={styles.button} /> 
      </View> 
      </View> 
      <View> 
      <Text> 
       Some other content... 
      </Text> 
      </View> 
     </View> 
     </ScrollView> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#edf2f9', 
    }, 
    card: { 
    backgroundColor: 'white', 
    height: 200, 
    width: 320, 
    shadowColor: 'black', 
    shadowOpacity: 0.25, 
    shadowOffset: {x: 10, y: 10}, 
    padding: 10, 
    marginTop: 10, 
    }, 
    header: { 
    borderBottomWidth: 0.5, 
    borderBottomColor: 'lightgrey', 
    flexDirection: 'row', 
    marginBottom: 10, 
    justifyContent: 'space-between', 
    }, 
    iconTitle:{ 
    flexDirection: 'row', 
    flex: 1, 
    marginBottom: 10, 
    }, 
    icon: { 
    height: 24, 
    width: 24, 
    backgroundColor: 'black', 
    marginRight: 5, 
    }, 
    title: { 
    flex: 1, 
    }, 
    buttonWrap: { 
    flexDirection: 'row', 
    }, 
    button: { 
    height: 24, 
    width: 24, 
    backgroundColor: 'red', 
    marginLeft: 5, 
    } 
});