React Native flexbox align

Question

我试图在react-native flexbox中获得一个非常简单的布局。

我只想尝试一下图像的滚动视图 每行两个并排图像，带有一些填充。

类似网格，但每行只有两个图像。间隔很好。

我如何在弹性框中实现这一目标。

现在它只是将图像全部渲染到左边。

STATIC

我不太熟悉它，所以我只是在直觉上感觉正确。但它显然根本不起作用。

Answer 1

您可以使用Dimensions计算设备的宽度，然后将其用作项目的宽度。查看我设置的this示例。

https://rnplay.org/apps/wXeffA

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Dimensions,
  ScrollView
} = React;

var width = Dimensions.get('window').width - 20
var circles = [1, 2, 3, 4, 5, 6, 7, 8]

var SampleApp = React.createClass({

  render() {

    let Circles = circles.map((c, i) => {
    return <View key={ i } style={ styles.cContainer }><View style={ styles.c }></View></View>
    })

    return (
      <View style={{ flex:1 }}>
        <ScrollView style={{ flex:1 }}>
         <View style={ styles.container }>{ Circles }</View>
        </ScrollView>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:60,
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  cContainer: {
    margin: 10,
    height:width / 2 - 10,
    width: width / 2 - 10
  },
  c: {
    backgroundColor: '#ededed',
    borderRadius: width / 4,
    flex:1
  }

});

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

Answer 2

使用flexDirection: 'row'，将视图内的images水平对齐，将每个内容中的2个放入其自己的小view容器中

它会在scrollview

中看起来像这样

    <ScrollView>
        <View >
           <Image />
           <Image />
        </View>
        <View>
           <Image />
           <Image />
        </View>
        //etc...
    </ScrollView>

编辑：更深入的例子

    <View style={[styles.buttonBar, {borderWidth: 1, backgroundColor: '#EBEEF7',}]}>
        <TouchableHighlight style={styles.centerButton} onPress={()=> this.composeEmail()}>
            <Text>Compose</Text>
        </TouchableHighlight>
        <TouchableHighlight style={styles.centerButton} onPress={()=> this.removeMessage()}>
            <Text>Delete</Text>
        </TouchableHighlight>
        <TouchableHighlight style={styles.centerButton}>
            <Text>untrash</Text>
        </TouchableHighlight>
    </View> 

样式：

buttonBar: {
    flex: .1,
    alignSelf: 'stretch',
    alignItems: 'center',
    flexDirection: 'row',
    padding: 5,
},

centerButton: {
    flex: 1,
    alignItems: 'center',
    },