1

我正在尝试学习本机反应。

我有以下代码:

<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"}}>

是一个意外的标记”。

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

基本上,如果这是 web 的 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>

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

4

5 回答 5

2

使用 flexDirection:'row' 设置容器,并且每个孩子都拥有屏幕的一半 flexBasis 而没有 flex 增长。像这样的东西:

<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>
...

于 2017-10-10T13:44:53.450 回答
0

不久前我开始使用 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
  }
});
于 2017-10-10T14:06:21.853 回答
0

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

<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>
于 2017-10-10T18:21:35.120 回答
0

您必须将 style={{flex:1}} 赋予主视图,这可能会解决您的问题。

于 2017-10-10T18:30:13.460 回答
0

MdBalal 的策略行不通。RN 中的 flex:0.5 与 web 标准中的不一样,如果您在容器中放置超过 2 个子组件,它将不起作用。绕行是将子组件分组到一个容器中的两个组件。例如:

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


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

于 2019-10-17T07:24:34.150 回答