フレックスを使用してツールバーのボタンを整列する

Question

私は反応ネイティブで新しく、2日間2つのツールバーボタンを整列させてしまいました。フレックスを使用してツールバーの右側に配置する必要があります。しかし、私はそれをすることができませんでした。

export default class ToolbarHorizontal extends Component { 

    // component prop types 
    static propTypes = { 
    items: React.PropTypes.arrayOf(React.PropTypes.shape({ 
     active: React.PropTypes.bool, 
     name: React.PropTypes.string.isRequired, 
     imageSourceActive: React.PropTypes.number.isRequired, 
     imageSourceInactive: React.PropTypes.number.isRequired, 
     onOpen: PropTypes.func, 
    })).isRequired, 
    toolbarActiveItem: React.PropTypes.string.isRequired, 
    forcedPath: React.PropTypes.bool, 
    forcedPathImageSource: React.PropTypes.number, 
    tintColor: React.PropTypes.string, 
    }; 

    constructor(props) { 
    super(); 
    this.toolbarActiveIndex = props.items.map((el) => el.name).indexOf(props.toolbarActiveItem); 
    } 

    render() { 
    const { items } = this.props; 
    let { toolbarActiveItem } = this.props; 
    let { forcedPath } = this.props; 
    let { forcedPathImageSource } = this.props; 
    let { tintColor } = this.props; 
    tintColor = (tintColor) ? tintColor : '#000'; // default value is black 
    return (
     <View style={styles.container} > 
     <ScrollView 
      horizontal={true} 
      collapsable={true} 
      showsHorizontalScrollIndicator={false} 
      showsVerticalScrollIndicator={false} 
      style={styles.scroller} 
     > 
    <View style={styles.componentContainer}> 
     { items.map((item, index) => { 
      let active = (item.active !== undefined) ? item.active : true; // default value is true 
      if (active) { 
       return(
       <View key={item.id} style={styles.imageContianer}> 
        {(toolbarActiveItem == item.name) && 
        <View style={styles.insideImageContainer}> 
         <Image 
         source={item.imageSourceSection} 
         style={styles.item} 
         /> 
         <Text size={20} style={{color:tintColor, paddingRight:10}}>{!forcedPath ? item.description : null}</Text> 
        </View> 
        } 
       </View> 
      ); 
      } 
      } 
     )} 


<View style={styles.buttomContainer}> 
     { items.map((item, index) => { 
      //console.log('toolbarActiveItem == item.name:', toolbarActiveItem, '==', item.name); 
      let active = (item.active !== undefined) ? item.active : true; // default value is true 
      if (active && (!forcedPath || item.isVisibleWhenForcedPath)) { 
       return(
       <View key={item.id} > 
        {item.isTouchable && forcedPath && index > 0 && 
        <Image 
         source={forcedPathImageSource} 
         style={styles.forcedPathImage} 
        /> 
        } 
        {item.isTouchable && 
        <TouchableOpacity onPress={() => { 
         if (!forcedPath) { // when forcedPath, buttons are never touchable 
         if (toolbarActiveItem != item.name) { 
          item.onOpen(item.name); 
          toolbarActiveItem = item.name; 
         } 
         else 
         { // already on opened page, go back if button is pressed again 
          this.props.navigation.goBack(); 
         } 
         } 
        }}> 
         {forcedPath && 
         <Image 
          source={(toolbarActiveItem == item.name) ? item.imageSourceForcedPathActive : index > this.toolbarActiveIndex ? item.imageSourceForcedPathTobevisited : item.imageSourceForcedPathVisited} 
          style={styles.item} 
         /> 
         } 
         {!forcedPath && 
         <Image 
          source={(toolbarActiveItem == item.name) ? item.imageSourceActive : item.imageSourceInactive} 
          style={styles.item} 
         /> 
         } 
        </TouchableOpacity> 
        } 
       </View> 
      ); 
      } 
      } 
     )} 
      </View> 
     </View> 

     </ScrollView> 
     </View> 
    ); 
    } 

} 

const styles = StyleSheet.create({ 
    container: { 
    flex:0.16, 
    flexDirection:'row' , 

    //backgroundColor: 'transparent', 
    }, 
    componentContainer: { 
    flex:1, 
    flexDirection:'row', 
    alignContent:'center', 
    alignItems: 'center', 

    }, 
    imageContianer: { 
    flex:1, 
    flexDirection:'row', 
    alignContent:'center', 
    alignItems:'center', 

    }, 
    buttomContainer: { 
    flex:1, 
    flexDirection:'row', 
    // backgroundColor: '#9b59b6' , 
    }, 
insideImageContainer: { 
    flex:1, 
    alignItems:'center', 
    flexDirection:'row', 
}, 

    scroller: { 
    marginHorizontal: 0, 
    marginVertical: 10, 
    }, 
    item: { 
    width: 60, 
    height: 60, 
    //marginRight: 5, 
    margin: 2, 
    }, 
    forcedPathImage: { 
    flex: 1, 
    width: 24, 
    height: 36, 
    resizeMode: 'contain', 
    }, 
}); 

実際には問題はフレックス価値の変化がinsideImageContainerかimageContianerに動作しない、ということである：ここではコードです。あなたは私にこの問題を解決する助けてくれますか？ ありがとうございます。最低で

Answer 1

これはあなたが必要とするすべてのようになります。

Toolbar =() => <View style={styles.container}> 
    <View style={styles.componentContainer}> 
    <Text>Icon</Text> 
    <Text>Title</Text> 
    </View> 
    <View style={styles.buttomContainer}> 
    <Text>Button1</Text> 
    <Text>Button2</Text> 
    </View> 
</View> 

const styles = StyleSheet.create({ 
    container: { 
    flexDirection: 'row' 
    }, 
    componentContainer: { 
    flex: 1, 
    flexDirection: 'row' 
    }, 
    buttomContainer: { 
    flexDirection: 'row' 
    } 
}); 

See this running in Expo

フレックスレイアウトをされて使用した場合について考える事。どのコンポーネントがスペアスペースを占めるべきか？そのコンポーネントにflex: 1プロパティを与えます。 （複数のコンポーネントが同じスペースを共有する必要がある場合は、それらの間にフレックスを分割します）。

この場合、buttomContainer（typo？）が必要以上に大きくならないようにします。 componentContainerをできるだけ大きく（フレックス）大きくして、buttomContainerを右に押したいとします。