将照片和文本相邻放置答案

【问题标题】：Placing a photo and a text adjacent to each other将照片和文本相邻放置
【发布时间】：2018-03-30 22:28:00
【问题描述】：

我对 react-Native 很陌生。我正在尝试使用 react-Native 在 android 中创建这个移动应用程序。我的页面上有一个顶部徽标。我试图让徽标覆盖手机的顶部边框，从左边框延伸到右边框，然后在徽标的正下方，我试图将照片和文字放在照片旁边。不知何故，顶部徽标在徽标上方的空间很小，我无法删除，并且徽标与其下方的其他图像之间存在巨大空间。我无法显示文本。我还想在文本中显示一些也没有显示的中断。我收到以下错误：

下面是我的代码

     type Props = {};
     export default class App extends Component<Props> {
  render() {
    return (

      <View style={styles.container}>
       <Image 
           resizeMode="contain" 
           style={styles.logo} 
           source={require('./Resources/logo.jpg')} />
      </View>

       <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={styles.container}>
          <Image
            resizeMode="contain"
            source={{uri: './Resources/photo.png'}}
            style={styles.photo} />
        </View>
        <View style={styles.container}>
          <Text>Welcome to our <br>website!. Our website has <br> been designed to <br> provide you with easy <br> access to information <BR> and a variety of online <br> services to assist you <br> with your needs.</Text>
        </View>
      </View>

样式表如下：

    const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    position: 'relative'
  },
   logo: {
      position: 'absolute',
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
      width: 350

    },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },

  photo:
  {
    top:0,
    width:180,
    height: 300

  }

  container3: {
      flexDirection: 'row',
      justifyContent: 'flex-end',
      borderBottomWidth: 1,

   },

});

任何帮助将不胜感激。

【问题讨论】：

标签： css reactjs react-native

【解决方案1】：

渲染函数要求您只返回一个 DOM 元素。因此，您必须执行以下操作（顺便说一下，我不知道您是否忘记了代码的某些部分，但是渲染函数末尾的括号不存在）：

render() {
  return (
    <View style={styles.container}>
      <View>
        <Image 
          resizeMode="contain" 
          style={styles.logo} 
          source={require('./Resources/logo.jpg')} />
      </View>
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={styles.container}>
          <Image
            resizeMode="contain"
            source={{uri: './Resources/photo.png'}}
            style={styles.photo} />
        </View>
        <View style={styles.container}>
          <Text>Welcome to our <br>website!. Our website has <br> been designed to <br> provide you with easy <br> access to information <BR> and a variety of online <br> services to assist you <br> with your needs.</Text>
        </View>
      </View>
    </View>
  );
}

我没有检查样式，但是错误来自JSX的错误使用。

【讨论】：