ボタン要素を画像要素

Question

と整列させる方法は、画像が左にあり、ボタンが右になるようにこのレイアウトを配置する方法ですか？

今のところ、画像は左上に表示され、ボタンは画面の幅全体に表示されます。

ありがとうございます！

class HomeScreen extends React.Component { static navigationOptions = { title： 'Welcome'、 };

render（）{ const {navigate} = this.props.navigation; リターン（ こんにちは、アプリのチャット

  <Image 
       style={{width: 50, height: 50}} 
       source={getFunction(1)} 
      /> 
      <Button 
       style={{width: 50, height: 50}} 
       onPress={() => navigate('Chat', { user: 'Abe', avatar: getFunction(1) })} 
       title = "Chat with Abe" 
      /> 
      <Image 
       style={{width: 50, height: 50}} 
       source={getFunction(2)} 
      />     
      <Button 
       onPress={() => navigate('Chat', { user: 'Jack', avatar: getFunction(2) })} 
       title = "Chat with Jack" 
      /> 
      <Image 
       style={{width: 50, height: 50}} 
       source={getFunction(3)} 
      />     
      <Button 
       onPress={() => navigate('Chat', { user: 'Kate', avatar: getFunction(3) })} 
       title = "Chat with Kate" 
      /> 
    ); 
} 

}

Answer 1

あなたはこれを試すことができます！

以下のコードスニペットは、一つの画像と一つのボタンの位置合わせのためにある

。

<View style={{ flex: 1, flex-direction: 'row', justifyContent: 'space-between' }}> 
    <View style={{ margin: 15 }} > 
    <Image style={{width: 50, height: 50}} source={getFunction(1)} /> 
    </View> 

    <View style={{ margin: 15 }} > 
    <Button style={{width: 50, height: 50} onPress={() => navigate('Chat', { 
    user: 'Abe', avatar: getFunction(1) })} title = "Chat with Abe" /> 
    </View> 

</View> 

乾杯：