让你的应用更美丽：React Native 样式指南

2023-10-18 21:04:22

样式表

React Native 的样式表与 CSS 非常相似。它们都是由一组规则组成，这些规则指定了组件的外观。样式表可以内联地添加到组件中，也可以在单独的文件中定义。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
  },
});

组件

React Native 组件是构建用户界面的基本构建块。组件可以是简单的，比如一个按钮，也可以是复杂的，比如一个带有导航栏和选项卡栏的应用程序。

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

const MyComponent = () => {
  return (
    <View>
      <Text>Hello world!</Text>
    </View>
  );
};

export default MyComponent;

布局

React Native 提供了许多不同的布局组件，可以用来创建复杂的布局。这些组件包括 View, Text, Image, Button, ScrollView 等。

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

const MyComponent = () => {
  return (
    <View style={{ flexDirection: 'row' }}>
      <Text>Item 1</Text>
      <Text>Item 2</Text>
      <Text>Item 3</Text>
    </View>
  );
};

export default MyComponent;

文本

React Native 提供了强大的文本组件，可以用来显示和样式化文本。文本组件包括 Text, TextInput 和 TouchableOpacity 等。

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

const MyComponent = () => {
  return (
    <View>
      <Text style={{ fontSize: 20, fontWeight: 'bold' }}>Hello world!</Text>
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        onChangeText={text => console.log(text)}
      />
    </View>
  );
};

export default MyComponent;

颜色

React Native 提供了多种方法来设置组件的颜色。可以使用十六进制代码、RGB 值或预定义的名称来设置颜色。

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

const MyComponent = () => {
  return (
    <View style={{ backgroundColor: '#F5FCFF' }}>
      <Text style={{ color: 'red' }}>Hello world!</Text>
    </View>
  );
};

export default MyComponent;

图像

React Native 提供了 Image 组件来显示图像。图像组件可以显示本地图像或远程图像。

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

const MyComponent = () => {
  return (
    <View>
      <Image
        source={{ uri: 'https://example.com/image.png' }}
        style={{ width: 200, height: 200 }}
      />
    </View>
  );
};

export default MyComponent;

动画

React Native 提供了许多不同的动画组件，可以用来创建复杂的动画。动画组件包括 Animated, Easing 和 LayoutAnimation 等。

import React from 'react';
import { View, Animated } from 'react-native';

const MyComponent = () => {
  const fadeAnim = new Animated.Value(0);

  const fadeIn = () => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 1000,
    }).start();
  };

  return (
    <View>
      <Animated.View style={{ opacity: fadeAnim }}>
        <Text>Hello world!</Text>
      </Animated.View>
      <Button title="Fade In" onPress={fadeIn} />
    </View>
  );
};

export default MyComponent;