React Native 入门指南：基础组件和布局样式-JavaScript中文网-JavaScript教程资源分享门户

React Native 是一种基于 JavaScript 的开源框架，可以用于构建 iOS 和 Android 应用程序。它允许开发者使用 React 的组件模型来构建移动应用程序，从而使代码重用和维护变得更加容易。本文将介绍 React Native 的基础组件和布局样式，帮助初学者快速入门。

基础组件

React Native 提供了一组基础组件，这些组件可以用于构建用户界面。以下是一些常用的基础组件：

View

View 是 React Native 中最基本的组件之一，它类似于 HTML 中的 div 元素。View 用于组织和布局其他组件，可以设置背景颜色、边框和阴影等样式属性。

// www.javascriptcn.com code example
import React from 'react';
import { View } from 'react-native';

const App = () => {
  return (
    <View style={{backgroundColor: '#fff', borderWidth: 1, borderColor: '#000'}}>
      //其他组件
    </View>
  );
};

export default App;

Text

Text 组件用于显示文本内容，类似于 HTML 中的 p 元素。它可以设置文本颜色、字体大小和样式等属性。

// www.javascriptcn.com code example
import React from 'react';
import { View, Text } from 'react-native';

const App = () => {
  return (
    <View>
      <Text style={{color: '#000', fontSize: 16}}>
        Hello, React Native!
      </Text>
    </View>
  );
};

export default App;

Image

Image 组件用于显示图片，可以从本地或远程获取图片资源。它可以设置图片大小、缩放模式和占位符等属性。

// www.javascriptcn.com code example
import React from 'react';
import { View, Image } from 'react-native';

const App = () => {
  return (
    <View>
      <Image
        source={require('./assets/image.png')}
        style={{width: 100, height: 100}}
      />
    </View>
  );
};

export default App;

TextInput

TextInput 组件用于接收用户输入的文本，类似于 HTML 中的 input 元素。它可以设置输入框样式、键盘类型和占位符等属性。

// www.javascriptcn.com code example
import React, { useState } from 'react';
import { View, TextInput } from 'react-native';

const App = () => {
  const [text, setText] = useState('');

  return (
    <View>
      <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={text => setText(text)}
        value={text}
      />
    </View>
  );
};

export default App;

布局样式

React Native 提供了一组基本的布局样式，可以用于控制组件的位置、大小和间距。以下是一些常用的布局样式：

flex

flex 是一种弹性布局模型，可以用于控制组件的宽度、高度和位置。它有三个属性：flexDirection、justifyContent 和 alignItems。

// www.javascriptcn.com code example
import React from 'react';
import { View } from 'react-native';

const App = () => {
  return (
    <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
      <View style={{width: 50, height: 50, backgroundColor: 'red'}} />
      <View style={{width: 50, height: 50, backgroundColor: 'green'}} />
      <View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
    </View>
  );
};

export default App;

position

position 是一种控制组件位置的属性，可以用于将组件相对于父组件或屏幕定位。它有四个属性：relative、absolute、top 和 left。

// www.javascriptcn.com code example
import React from 'react';
import { View } from 'react-native';

const App = () => {
  return (
    <View style={{position: 'relative'}}>
      <View style={{width: 50, height: 50, backgroundColor: 'red', position: 'absolute', top: 10, left: 10}} />
      <View style={{width: 50, height: 50, backgroundColor: 'green', position: 'absolute', top: 30, left: 30}} />
      <View style={{width: 50, height: 50, backgroundColor: 'blue', position: 'absolute', top: 50, left: 50}} />
    </View>
  );
};

export default App;

margin 和 padding

margin 和 padding 是一种控制组件间距的属性，可以用于设置组件的外边距和内边距。

// www.javascriptcn.com code example
import React from 'react';
import { View } from 'react-native';

const App = () => {
  return (
    <View style={{margin: 10}}>
      <View style={{width: 50, height: 50, backgroundColor: 'red', margin: 10}} />
      <View style={{width: 50, height: 50, backgroundColor: 'green', margin: 10}} />
      <View style={{width: 50, height: 50, backgroundColor: 'blue', margin: 10}} />
    </View>
  );
};

export default App;

结语

本文介绍了 React Native 的基础组件和布局样式，希望可以帮助初学者快速入门。作为一种新兴的移动应用程序开发框架，React Native 有着广阔的应用前景，希望读者可以继续深入学习和使用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d919cfa941bf7134094c7b

React Native 入门指南：基础组件和布局样式