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>

つまり、各画像の下にキャプションを付けた 2 列のサムネイル画像が必要なだけです。

4

5 に答える 5

0

メイン ビューに style={{flex:1}} を指定する必要があり、これで問題が解決する場合があります。

于 2017-10-10T18:30:13.460 に答える
0

MdBalal の戦略は機能しません。RN の flex:0.5 は Web 標準と同じではありません。コンテナに 2 つ以上の子コンポーネントを配置すると機能しません。ウォークアラウンドは、子を 1 つのコンテナー内の 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 に答える