有两个视图水平填充容器查看器吗？

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);