Стилизация в React Native: StyleSheet vs Styled Components vs NativeWind

1import { StyleSheet, View, Text } from 'react-native';
2
3function Card({ title, description }) {
4  return (
5    <View style={styles.card}>
6      <Text style={styles.title}>{title}</Text>
7      <Text style={styles.description}>{description}</Text>
8    </View>
9  );
10}
11
12const styles = StyleSheet.create({
13  card: {
14    backgroundColor: '#fff',
15    borderRadius: 8,
16    padding: 16,
17    marginVertical: 8,
18    shadowColor: '#000',
19    shadowOffset: { width: 0, height: 2 },
20    shadowOpacity: 0.1,
21    shadowRadius: 4,
22    elevation: 3,
23  },
24  title: {
25    fontSize: 18,
26    fontWeight: 'bold',
27    marginBottom: 8,
28  },
29  description: {
30    fontSize: 14,
31    color: '#666',
32  },
33});

1function DynamicCard({ isActive }) {
2  return (
3    <View style={[
4      styles.card,
5      isActive && styles.activeCard
6    ]}>
7      <Text>Content</Text>
8    </View>
9  );
10}

1npm install styled-components

1import styled from 'styled-components/native';
2
3const Container = styled.View`
4  background-color: ${props => props.primary ? '#007AFF' : '#fff'};
5  padding: 16px;
6  border-radius: 8px;
7`;
8
9const Title = styled.Text`
10  font-size: 18px;
11  font-weight: bold;
12  color: #333;
13`;
14
15function Card({ primary, title }) {
16  return (
17    <Container primary={primary}>
18      <Title>{title}</Title>
19    </Container>
20  );
21}

1npm install nativewind tailwindcss
2npx tailwindcss init

1module.exports = {
2  content: ['./**/*.{js,jsx,ts,tsx}'],
3  theme: {
4    extend: {},
5  },
6  plugins: [],
7};

1import { View, Text } from 'react-native';
2
3function Card({ title, description }) {
4  return (
5    <View className="bg-white rounded-lg p-4 m-2 shadow-md">
6      <Text className="text-lg font-bold text-gray-900 mb-2">
7        {title}
8      </Text>
9      <Text className="text-sm text-gray-600">
10        {description}
11      </Text>
12    </View>
13  );
14}