反応するネイティブフレックス50％エラーの原因

Question

私はネイティブの反応を学ぼうとしています。

私は次のコードを持っている：私はこのコードを実行すると

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

、私はちょうど、各画像の下にキャプションをサムネイル画像の2つの列をしたいです。

Answer 1

flexDirectionを使用してコンテナを設定します。「行」と各子がフレックスの成長なしに画面の半分を持つようにします。このような何か：

<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

が、私はあまり時間前に反応し、ネイティブに始まり、私は何が必要だと思うが、このようなものです：あなたが缶を達成しようとしている何

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

スタイル= {{フレックス：1}}をmに指定する必要があります。これはあなたの問題を解決するかもしれません。