有兩個視圖水平填充容器查看器嗎？

Question

我想有兩個視圖填充整個容器視圖，但由於某種原因，我不能以令人滿意的方式真正做到 - 我設法做到這一點的唯一方法是使用絕對寬度，這看起來像一個對我不好的做法。

我的目標是有一個視圖包含幾行（gridLine），其中每行包含兩個可點擊的視圖（gridButton）。

這是父視圖風格：

gridLine: { 
    flexDirection: 'row', 
    alignContent: 'stretch', 
    backgroundColor: 'grey', 
    overflow: 'hidden', 
} 

這是孩子們提出的意見風格：

gridButton: { 
     alignContent: 'center', 
     justifyContent: 'center', 
     alignItems: 'center', 
     alignSelf: 'stretch', 
     borderWidth: 1, 
     borderColor: 'darkgrey', 
     backgroundColor: '#f9f9f9', 
     height: 50, 
     width: '50%', // I tried putting it to null, '100%', nothing works :(
    } 

這是它的實際使用情況：

<View style={styles.gridLine}> 
    <TouchableHighlight> 
     <View style={styles.gridButton}> 
      <Text>Text1</Text> 
     </View> 
    </TouchableHighlight> 

    <TouchableHighlight> 
     <View style={styles.gridButton}> 
      <Text>Text1</Text> 
     </View> 
    </TouchableHighlight> 
</View> 

這是它現在是如何：

這是我希望它看起來像：這個問題的

活生生的例子： https://snack.expo.io/SkfLNbiFZ

Answer 1

您可以使用FlatList 2列，只要你想渲染的成分。 如果你想要可變高度組件，你可以使用這個基於FlatList本身的庫 https://github.com/AppAndFlow/react-native-masonry-list。

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Dimensions, 
    Button, 
    FlatList, 
    TouchableHighlight 
} from 'react-native'; 
var { height, width } = Dimensions.get('window'); 
const equalWidth = width/2; 
export default class flatlistDemo extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     buttonList: [ 
     { 
      id:1, 
      buttonText: "ARG1", 
     }, 
     { 
      id:2, 
      buttonText: "ARG2", 
     }, 
     { 
      id:3, 
      buttonText: "ARG3", 
     }, 
     { 
      id:4, 
      buttonText: "ARG4", 
     }, { 
      id:5, 
      buttonText: "ARG5", 
     } 
     , { 
      id:6, 
      buttonText: "ARG6", 
     } 
     ] 
    } 
    } 


    _keyExtractor = (item, index) => item.id; 

    renderRowItem = (itemData) => { 
    return (

     <TouchableHighlight style={{ height: 50, margin:5,backgroundColor: '#000000', width: equalWidth -10}}> 
     <Text style={{ color: '#FFFFFF' }}>{itemData.item.buttonText}</Text> 
     </TouchableHighlight> 

    ) 
    } 

    render() { 
    return (
     <FlatList 

     data={this.state.buttonList} 
     numColumns={2} 
     keyExtractor={this._keyExtractor} 
     renderItem={this.renderRowItem} 
     /> 

    ); 
    } 
} 

const styles = StyleSheet.create({ 

    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    instructions: { 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 5, 
    }, 
}); 

AppRegistry.registerComponent('flatlistDemo',() => flatlistDemo);