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

您可以使用包含2列的FlatList并根据需要渲染组件。如果需要可变高度组件，可以使用此库 https://github.com/AppAndFlow/react-native-masonry-list基于FlatList本身。

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

水平放置两个视图填充容器查看器？

1 个答案: