React Native Android：如何在一行中显示图像和文本？

Question

我试图为Android创建react native应用，其中子图像和名称将显示在一行中。您可以在rawgit上进行检查。

    import React, { Component } from 'react'
    import { AppRegistry, Text, View, Image } from 'react-native'

    export default class App extends Component {
      render() {
        return (
          <View>
           <Text style={{ textAlign: 'left', fontSize: 15, backgroundColor:'grey'}}>
                            <Image source={{uri: 'https://leaderbord-552b1.firebaseapp.com/AdminLTE%202%20_%20User%20Profile_files/mount-carmel-logo.png'}} style={{width: 70, height: 70, borderRadius:70}} />
                            <Text style={{ backgroundColor:'lightblue', }}>Vindhyachal</Text> 
                        </Text>
          </View>     
        )
      }
    }

    AppRegistry.registerComponent('App', () => App)

我在输出下面，这是错误的，文本显示在底部而不是中间的同一行。

注意：-我无法更改组件结构，因为我在下面的react-native-material-ui-demo-app Drawer中使用它。

    <Drawer.Section
        divider
        items={[
            { value: <Text style={{ textAlign: 'left', fontSize: 15, backgroundColor:'grey'}}>
                        <Image source={{uri: child.image'}} style={{width: 70, height: 70, borderRadius:70}} />
                        <Text style={{ backgroundColor:'lightblue', }}>{child.name}</Text> 
                    </Text> },
            { value: <Text style={{ textAlign: 'left', fontSize: 15, backgroundColor:'grey'}}>
                        <Image source={{uri: child.image'}} style={{width: 70, height: 70, borderRadius:70}} />
                        <Text style={{ backgroundColor:'lightblue', }}>{child.name}</Text> 
                    </Text> }
        ]}
    />

下面是我遇到此问题的应用的屏幕截图。

如果有人可以帮助我解决此问题，我将不胜感激。预先感谢。

Answer 1

这是我用来处理您需要的示例：

import React, { Component } from 'react';
import {
  Text, View, Image
} from 'react-native';
import Dimensions from 'Dimensions';

const DeviceWidth = Dimensions.get('window').width;
const DeviceHeight = Dimensions.get('window').height;

class MyClass extends React.Component {
  render() {
    return (
      <View style={{flexDirection:'row', width:DeviceWidth, height:DeviceWidth*0.5, alignItems:'center'}}>
        <Image source={{uri : 'someUrl'}} 
        style={{width:DeviceWidth*0.5, height:DeviceWidth*0.5, resizeMode:'contain'}}/>
        <Text>Next to Image</Text>
      </View>
    );
  }
}
export default MyClass;

Answer 2

以下是更新的代码，其中将flex样式移至View标签。共享URL，您可以在其中玩flex。

    export default class App extends Component {
      render() {
        return (
          <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
           <Text style={{ textAlign: 'left', fontSize: 15, backgroundColor:'grey'}}>
                <Image source={{uri: 'https://leaderbord-552b1.firebaseapp.com/AdminLTE%202%20_%20User%20Profile_files/mount-carmel-logo.png'}} style={{width: 70, height: 70, borderRadius:70}} />
                <Text style={{ backgroundColor:'lightblue', }}>Vindhyachal</Text> 
             </Text>
          </View>     
        )
      }
    }

    AppRegistry.registerComponent('App', () => App)

Answer 3

可以通过以下两种方法来实现：
   1]删除了内部Text块（只需向您的Text添加alignSelf：“ center”），如下所示：

<View style={{flexDirection: 'row', textAlign: 'left', fontSize: 15, backgroundColor:'grey'}}>
    <Image source={{uri: 'https://leaderbord-552b1.firebaseapp.com/AdminLTE%202%20_%20User%20Profile_files/mount-carmel-logo.png'}} style={{width: 70, height: 70, borderRadius:70}} />
    <Text style={{ backgroundColor:'lightblue', alignSelf: "center" }}>Vindhyachal</Text>
</View>

2]不使用现有的Drawer.Section代码删除文本（需要提供float：“ left”样式，并将Text定位为具有最高值的绝对值），如下所示：

<Text style={{ textAlign: 'left', fontSize: 15, backgroundColor:'grey', alignItems:"center", float:"left", position:"absolute"}}>
    <Image source={{uri: 'https://leaderbord-552b1.firebaseapp.com/AdminLTE%202%20_%20User%20Profile_files/mount-carmel-logo.png'}} style={{width: 70, height: 70, borderRadius:70, float:"left"}} />
    <Text style={{ backgroundColor:'lightblue', float:"left", position:"absolute", top:"45%"}}>{child.name}</Text> 
</Text>