Question

我很反应 - 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,

   },

});

任何帮助都将受到高度赞赏。

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

将照片和文本放在一起

1 个答案: