react native flex 50% 导致错误

Question

我正在尝试学习 React Native。

我有以下代码：

<View>
    <View style={{flex:0.5,flexDirection="row"}}>
        <Image source={{uri:"http://image.com/image1.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
        <Text>Picture 1</Text>
    </View>
    <View style={{flex:0.5,flexDirection="row"}}>
        <Image source={{uri:"http://image.com/image2.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
        <Text>Picture 2</Text>
    </View>
    <View style={{flex:0.5,flexDirection="row"}}>
        <Image source={{uri:"http://image.com/image3.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
        <Text>Picture 3</Text>
    </View>
    <View style={{flex:0.5,flexDirection="row"}}>
        <Image source={{uri:"http://image.com/image4.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
        <Text>Picture 4</Text>
    </View>
</View>

但是当我运行这段代码时，我收到一条错误消息

<View style={{flex:0.5, flexDirection:"row"}}>

“是一个意外的标记”。

我尝试用 50% 和“0.5”替换 0.5，但这些也会导致错误。

基本上，如果这是针对网络的 html css，我要实现的行为是：

<div>
    <div style="width:50%; float:left;">
        <img src="http://image.com/image1.jpg" style="width:100%; height:auto;" />
        <span>Picture 1</span>
    </div>
    <div style="width:50%; float:left;">
        <img src="http://image.com/image2.jpg" style="width:100%; height:auto;" />
        <span>Picture 1</span>
    </div>
    <div style="width:50%; float:left;">
        <img src="http://image.com/image3.jpg" style="width:100%; height:auto;" />
        <span>Picture 1</span>
    </div>
    <div style="width:50%; float:left;">
        <img src="http://image.com/image4.jpg" style="width:100%; height:auto;" />
        <span>Picture 1</span>
    </div>
</div>

换句话说，我只想要两列缩略图，每张图片下方都有一个标题。

Answer 1

使用 flexDirection 设置容器：'row' 并且每个 child 有一半的屏幕 flexBasis 没有 flex grow。像这样：

<View>
<View style={{flexDirection="row"}}>
    <Image source={{uri:"http://image.com/image1.jpg"}} style={{flexBasis:Dimensions.get('window').width / 2, flexGrow:0}} resizeMode={"cover"} />
    <Text {{flexBasis:Dimensions.get('window').width / 2, flexGrow:0}}>Picture 1</Text>
</View>
...

Answer 2

我不久前开始使用 react-native，我想你需要的是这样的东西：

import React, { Component } from 'react';
import {
  StatusBar,
  View,
  Image,
  StyleSheet,
  TouchableHighlight
} from 'react-native';
import NavigationBar from './navigationBar';

const logo = require('../../imgs/logo5.png');
const clientMenu = require('../../imgs/menu_cliente.png');
const contactMenu = require('../../imgs/menu_contato.png');
const companyMenu = require('../../imgs/menu_empresa.png');
const serviceMenu = require('../../imgs/menu_servico.png');

export default class MainScene extends Component {

  render() {
    console.log('Rendering App!');
    return (
      <View>
        <StatusBar
          backgroundColor='#CCC'
        />
      <NavigationBar />

        <View style={styles.logo}>
          <Image source={logo} />
        </View>

        <View style={styles.menu}>
          <View style={styles.menuGroup}>

            <TouchableHighlight
              underlayColor={'#B9C941'}
              activeOpacity={0.3}
              onPress={() => {
                this.props.navigator.push({ id: 'client' });
              }}
            >
              <Image style={styles.imgMenu} source={clientMenu} />
            </TouchableHighlight>

            <TouchableHighlight
              underlayColor={'#61BD8C'}
              activeOpacity={0.3}
              onPress={() => {
                this.props.navigator.push({ id: 'contact' });
              }}
            >
              <Image style={styles.imgMenu} source={contactMenu} />
            </TouchableHighlight>

          </View>

          <View style={styles.menuGroup}>

            <TouchableHighlight
              underlayColor={'#EC7148'}
              activeOpacity={0.3}
              onPress={() => {
                this.props.navigator.push({ id: 'company' });
              }}
            >
              <Image style={styles.imgMenu} source={companyMenu} />
            </TouchableHighlight>

            <TouchableHighlight
              underlayColor={'#19D1C8'}
              activeOpacity={0.3}
              onPress={() => {
                this.props.navigator.push({ id: 'services' });
              }}
            >
              <Image style={styles.imgMenu} source={serviceMenu} />
            </TouchableHighlight>

          </View>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  logo: {
    marginTop: 30,
    alignItems: 'center'
  },
  menu: {
    alignItems: 'center'
  },
  menuGroup: {
    flexDirection: 'row'
  },
  imgMenu: {
    margin: 15
  }
});

Answer 3

您想要实现的目标可以通过以下代码简单地完成：

<View style={{flexDirection:column}}>
  <View style={{flex:1, flexDirection:row}}>
    <View style={{flex:0.5,flexDirection:column}}>
      <Image source={{uri:"http://image.com/image1.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
      <Text>Picture 1</Text>
    </View>
    <View style={{flex:0.5,flexDirection:column}}>
      <Image source={{uri:"http://image.com/image1.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
      <Text>Picture 1</Text>
    </View>
  </View>
  <View style={{flex:1, flexDirection:row}}>
    <View style={{flex:0.5,flexDirection:column}}>
      <Image source={{uri:"http://image.com/image1.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
      <Text>Picture 1</Text>
    </View>
    <View style={{flex:0.5,flexDirection:column}}>
      <Image source={{uri:"http://image.com/image1.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
      <Text>Picture 1</Text>
    </View>
  </View>
</View>

Answer 4

你必须给主视图 style={{flex:1}} ，这可能会解决你的问题。

Answer 5

MdBalal 的策略行不通。 flex:0.5 in RN 和 web standard 不一样，如果您在容器中放置了超过 2 children 个组件。 walk-around 是一组 children 到一个容器中的两个组件。例如：

Suppose we have 3 child components in Container,
**Before**:
<Container><Child/><Child/><Child/></Container>


**After**:
<Container><Child/><Child/></Container> and 
<Container><Child/><EmptyPlaceholder/></Container>

react native flex 50% 导致错误

react native flex 50% causes errors

css

flexbox

react-native

react-native-flexbox