React Native入门——布局实践：开发京东客户端首页（一，2024年最新腾讯Android面经

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  Image,
  StatusBar,
} from 'react-native';
 
const App = () => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <StatusBar backgroundColor="#FFFFFF" barStyle="dark-content" />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={styles.scrollView}>
        <View style={styles.headerContainer}>
          <Image
            source={{
              uri: 'https://gw.alicdn.com/tfs/TB17Ki7UYj1gK0jSZFpXXaTkpXa-284-116.png',
            }}
            style={styles.logo}
          />
        </View>
        {/* 其他组件定义 */}
      </ScrollView>
    </SafeAreaView>
  );
};
 
const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: '#f3f3f3',
  },
  headerContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 30,
    marginBottom: 10,
  },
  logo: {
    width: 284,
    height: 116,
    resizeMode: 'contain',
  },
  // 其他样式定义
});
 
export default App;

这个代码示例展示了如何在React Native应用中使用SafeAreaView组件来确保内容不会被安全区域遮挡，使用StatusBar组件来设置状态栏的样式，以及如何通过ScrollView和View组件来构建一个基本的页面布局，并使用Image组件来加载一个图像。这个例子为开发者提供了一个简单的起点，用于学习如何在React Native应用中进行布局设计。