反应原生flex 50％导致错误

问题描述：

我有以下代码：

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

换句话说，我只是想缩略图的两列，每个图像下方的标题。

但是'flex：0.5'不等于'50％'，并且没有设置宽度，它表示0.5的2，其中2来自4个项目相加的flex值并且设置剩余空间应该如何分配在项目。你似乎寻找的是“flex-basis”，RN没有，但可以在这里找到替代品：https://stackoverflow.com/questions/35436478/react-native-substitute-for-flex-basis/43022365 – LGSon

上述修正，其中弯曲工作在RN中略有不同，并且不应该_...设置如何分配**左空间，而是_...设置空间应如何分布_ – LGSon

答

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

答

我没有太多的时间前开始反应母语，我想你需要的是这样的：

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

答

你正在尝试实现CAN

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

答

你必须给风格= {{柔性：1}}于M被这种代码简单地完成ain的观点，这可能会解决你的问题。

反应原生flex 50％导致错误

相关推荐