Hướng dẫn does react native use css for styling? - phản ứng có sử dụng css bản địa để tạo kiểu không?

Có khá nhiều cách để đạt được kiểu dáng tốt trong một ứng dụng tự nhiên phản ứng. Trong hướng dẫn này, chúng tôi sẽ xem xét các phương pháp tạo kiểu truyền thống trong React Native và giới thiệu cho bạn một thay thế phổ biến: các mô -đun CSS.

Rào cản để nhập để thiết kế và tạo các ứng dụng di động tùy chỉnh khá thấp nhờ sức mạnh của React Native và thực tế là nó hỗ trợ kiểu HTML và CSS bản địa ra khỏi hộp. Nếu bạn đã quen thuộc với phát triển web và có kinh nghiệm sử dụng React cho web, thì bạn sẽ gặp may vì những kỹ năng đó sẽ rất dễ dàng.

Phản ứng kiểu bản địa so với mô -đun CSS

Hệ thống thiết kế bố cục cốt lõi được sử dụng trong React Native là CSS Flexbox, hệ thống thiết kế phổ biến nhất trong số các nhà phát triển để xây dựng các trang web. Có sức mạnh của flexbox nướng trong việc thiết kế các ứng dụng di động có thể truy cập được cho các nhà phát triển cấp độ nâng cao và người mới bắt đầu.

Phản ứng ứng dụng gốc thường được tạo kiểu bằng cách sử dụng kiểu nội tuyến hoặc đạo cụ tạo kiểu. Các mô -đun CSS cung cấp một sự thay thế di động, mạnh mẽ hơn để sử dụng các kiểu tự nhiên phản ứng truyền thống. Các mô -đun CSS cho phép bạn sử dụng các phong cách phạm vi cục bộ trong ứng dụng gốc React của bạn, giúp mã của bạn sạch hơn đáng kể và dễ đọc hơn.

Trong hướng dẫn này, chúng tôi sẽ chỉ ra cách mỗi phương thức hoạt động với các ví dụ thực tế và chứng minh lý do tại sao bạn nên xem xét sử dụng các mô -đun CSS để tạo kiểu cho ứng dụng gốc React của bạn.

Kiểu dáng trong React Native: Phương pháp truyền thống

React Native cho phép bạn tạo kiểu cho toàn bộ ứng dụng của mình bằng JavaScript. Mọi thành phần đều có thể sử dụng một prop có tên

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

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    backgroundColor: '#6804CD',
    width: '100%',
    height: 30,
  },
  text: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
});

Có hai phương pháp chính phản ứng bản địa có để tạo kiểu: kiểu dáng nội tuyến và sử dụng

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

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    backgroundColor: '#6804CD',
    width: '100%',
    height: 30,
  },
  text: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
});

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

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    backgroundColor: '#6804CD',
    width: '100%',
    height: 30,
  },
  text: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
});

Dưới đây, một ví dụ để cho thấy cách tạo kiểu nội tuyến hoạt động trong React Native:

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

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    backgroundColor: '#6804CD',
    width: '100%',
    height: 30,
  },
  text: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
});

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

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

Kiểu dáng nội tuyến là tuyệt vời cho các ứng dụng nhanh, nhỏ và cả trong các tình huống mà bạn muốn kiểm tra một số mã mà không phải thực hiện toàn bộ. Tuy nhiên, như bạn có thể thấy, có rất nhiều bản sao và mã không tuân thủ các nguyên tắc khô. Loại mã này sẽ không mở rộng tốt vì có rất nhiều sự lặp lại có thể được thay thế bằng một lớp CSS.

Bởi vì CSS nội tuyến phải được viết bằng cú pháp Case Case, không giống như các kiểu CSS truyền thống, sẽ mất nhiều thời gian hơn để chuyển đổi các kiểu CSS bình thường thành cú pháp này. Bạn có thể chỉ cần sao chép và dán mã.

Hơn nữa, việc thực hiện các phong cách nội tuyến là khó khăn hơn đáng kể để thực hiện các phong cách phù hợp vì các truy vấn truyền thông chỉ đơn giản là không làm việc. Các tùy chọn duy nhất là tạo ra một số loại logic kinh doanh để giúp nó hoạt động hoặc sử dụng hoàn toàn một phương pháp khác.

Ví dụ dưới đây cho thấy cách tạo ra kết quả tương tự bằng cách sử dụng đạo cụ kiểu:

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

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    backgroundColor: '#6804CD',
    width: '100%',
    height: 30,
  },
  text: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
});

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

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    backgroundColor: '#6804CD',
    width: '100%',
    height: 30,
  },
  text: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
});

Phương pháp áp dụng kiểu bản địa phản ứng là phương pháp mặc định để triển khai các kiểu CSS trong ứng dụng gốc React. Các kiểu dáng về cơ bản là một sự trừu tượng và rất giống với các kiểu dáng CSS truyền thống. Mã dễ đọc hơn đáng kể và việc bổ sung tên lớp đảm bảo rằng mã vẫn còn khô.

Cách tiếp cận CSS-in-JS này khá phổ biến, mặc dù có một cuộc tranh luận giữa cộng đồng về việc liệu JavaScript và CSS có nên có trong cùng một tệp hay không. Điều này thường được gọi là một sự tách biệt của các mối quan tâm, điều này quy định rằng bạn không nên trộn JavaScript và CSS với nhau; Mỗi người nên tồn tại trong tệp riêng của mình.

Đây là những gì mã trông như thế nào trong một ứng dụng khi được hiển thị:

Tại sao bạn nên sử dụng các mô -đun CSS

Một giải pháp thay thế tuyệt vời cho kiểu dáng nội tuyến và sử dụng các đạo cụ kiểu là sử dụng các mô -đun CSS. Các mô-đun CSS rất tuyệt vời vì chúng cho phép bạn có CSS ​​có thành phần có tính di động cao và bản địa hóa cho thành phần mà nó được gán. Bạn không còn cần phải lo lắng về sự va chạm giữa các tên chọn như ID và các lớp trong các tệp CSS khác có thể có cùng quy ước đặt tên.

Theo mặc định, các mô -đun CSS là các tệp được phân tán cục bộ, do đó không có xung đột với các tệp CSS khác. Với các mô -đun CSS, các tệp được viết bằng CSS thuần túy nhưng được chuyển đổi thành các đối tượng trong JavaScript, làm cho chúng mạnh mẽ và an toàn hơn để tích hợp.

Sự khác biệt duy nhất giữa mô -đun CSS và CSS bình thường là phần mở rộng tệp. CSS bình thường sử dụng quy ước đặt tên tệp

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

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    backgroundColor: '#6804CD',
    width: '100%',
    height: 30,
  },
  text: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
});

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

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    backgroundColor: '#6804CD',
    width: '100%',
    height: 30,
  },
  text: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
});

Mô -đun CSS: Một ví dụ thực tế

Dưới đây, bạn sẽ tìm thấy cùng một mã chúng tôi đã sử dụng trong các ví dụ để tạo kiểu nội tuyến và sử dụng các đạo cụ kiểu, nhưng lần này chúng tôi sẽ sử dụng các mô -đun CSS để tạo kiểu ứng dụng gốc React của chúng tôi.

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

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    backgroundColor: '#6804CD',
    width: '100%',
    height: 30,
  },
  text: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
});

import React from 'react';
import { View, Text, SafeAreaView } from 'react-native';
import style from './App.module.css';

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

Khi sử dụng các mô -đun CSS, bạn có thể thấy mã trông sạch như thế nào. Không có bảng kiểu CSS trong tệp này. Thay vào đó, nó phải được nhập, giúp tách mã. Mỗi phần tử có một lớp kiểu, xuất phát từ tệp

import React from 'react';
import { View, Text, SafeAreaView } from 'react-native';
import style from './App.module.css';

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

import React from 'react';
import { View, Text, SafeAreaView } from 'react-native';
import style from './App.module.css';

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

.container {
  flex-flow: row;
  justify-content: space-evenly;
  align-items: center;
  background-color: '#6804CD';
  width: '100%';
  height: 30;
}

.text {
  color: '#ffffff';
  font-weight: bold;
}

Mã bên trong tệp

import React from 'react';
import { View, Text, SafeAreaView } from 'react-native';
import style from './App.module.css';

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

Thiết kế một ứng dụng tự nhiên phản ứng sử dụng các mô -đun CSS

Hãy để lặn sâu hơn một chút và thiết kế một ứng dụng tự nhiên phản ứng toàn diện bằng các mô-đun CSS.

Trước khi bạn bắt đầu, hãy đảm bảo rằng môi trường phát triển của bạn được thiết lập. Với mục đích của hướng dẫn này, chúng tôi sẽ sử dụng khung và nền tảng Expo để phát triển các ứng dụng gốc React.

Prerequisites:

• Triển lãm (để phát triển các ứng dụng gốc React)
• React Native (để phát triển các ứng dụng gốc React)
• Phản ứng các mô -đun CSS gốc (để lấy các mô -đun CSS hoạt động trong React Native)
• React Native Paper, một bộ sưu tập các thành phần có thể tùy chỉnh và sản xuất cho React Native

Thiết lập một ứng dụng gốc React

Chúng tôi sẽ tạo ra Frontend React Native bằng công cụ Expo CLI.

Các thư viện sau sẽ được yêu cầu:

• Phản ứng-CSS-CSS-Transformer, biến CSS thành đối tượng kiểu tương thích tự nhiên phản ứng và xử lý tải lại trực tiếp
• BABEL-PLUGIN-REACT-BÀI TẬP-CÔNG CỤ-CÔNG CỤ-CÔNG CỤ-CÔNG CỤ-CƠ BẢN, chuyển đổi các câu lệnh ES6

  import React from 'react';
  import { View, Text, SafeAreaView } from 'react-native';
  import style from './App.module.css';
  
  export default function App() {
    return (
      <>
        
          
            Alpha
            Bravo
            Charlie
            Delta
            Echo
            Foxtrot
          
        
      
    );
  }
  

  3 thành các câu lệnh

  import React from 'react';
  import { View, Text, SafeAreaView } from 'react-native';
  import style from './App.module.css';
  
  export default function App() {
    return (
      <>
        
          
            Alpha
            Bravo
            Charlie
            Delta
            Echo
            Foxtrot
          
        
      
    );
  }
  

  4 dành riêng cho nền tảng nếu các tệp cụ thể của nền tảng tồn tại trên đĩa.
• Babel-plugin-react-bản thân tôi-classname-to-style, chuyển đổi thuộc tính

  import React from 'react';
  import { View, Text, SafeAreaView } from 'react-native';
  import style from './App.module.css';
  
  export default function App() {
    return (
      <>
        
          
            Alpha
            Bravo
            Charlie
            Delta
            Echo
            Foxtrot
          
        
      
    );
  }
  

  5 thành thuộc tính

  import React from 'react';
  import { StyleSheet, View, Text, SafeAreaView } from 'react-native';
  
  export default function App() {
    return (
      <>
        
          
            Alpha
            Bravo
            Charlie
            Delta
            Echo
            Foxtrot
          
        
      
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flexDirection: 'row',
      justifyContent: 'space-evenly',
      alignItems: 'center',
      backgroundColor: '#6804CD',
      width: '100%',
      height: 30,
    },
    text: {
      color: '#ffffff',
      fontWeight: 'bold',
    },
  });
  

  2

Đầu tiên, tạo một thư mục cho dự án và sau đó chạy lệnh bên dưới:

npx expo-cli init frontend

Chọn một mẫu trống và tiếp tục thiết lập.

import React from 'react';
import { View, Text, SafeAreaView } from 'react-native';
import style from './App.module.css';

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

import React from 'react';
import { View, Text, SafeAreaView } from 'react-native';
import style from './App.module.css';

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

>yarn add babel-plugin-react-native-classname-to-style babel-plugin-react-native-platform-specific-extensions react-native-css-transformer react-native-paper --dev

Mở dự án trong Trình chỉnh sửa mã của bạn và thay thế mã trong tệp

import React from 'react';
import { View, Text, SafeAreaView } from 'react-native';
import style from './App.module.css';

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'react-native-classname-to-style',
      ['react-native-platform-specific-extensions', { extensions: ['css'] }],
    ],
  };
};

Tiếp theo, thêm phần sau vào

.container {
  flex-flow: row;
  justify-content: space-evenly;
  align-items: center;
  background-color: '#6804CD';
  width: '100%';
  height: 30;
}

.text {
  color: '#ffffff';
  font-weight: bold;
}

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-css-transformer")
    },
    resolver: {
      sourceExts: [...sourceExts, "css"]
    }
  };
})();

Cuối cùng, hãy thêm mã bên dưới vào tệp

.container {
  flex-flow: row;
  justify-content: space-evenly;
  align-items: center;
  background-color: '#6804CD';
  width: '100%';
  height: 30;
}

.text {
  color: '#ffffff';
  font-weight: bold;
}

{
  "expo": {
    "packagerOpts": {
      "config": "metro.config.js",
      "sourceExts": ["js", "jsx", "css"]
    }
  }
}

Với thiết lập đó, đã đến lúc chạy lệnh bên dưới để khởi động máy chủ:

yarn start

Bạn sẽ xem các liên kết và mã QR để mở các công cụ nhà phát triển CLI Expo CLI. Mở nó trong cửa sổ trình duyệt và sau đó chọn một thiết bị hoặc trình giả lập để chạy nó.

Nhiều bài viết tuyệt vời hơn từ Logrocket:

• Đừng bỏ lỡ một khoảnh khắc với bản phát lại, một bản tin được quản lý từ Logrocket
• Tìm hiểu cách Galileo của Logrocket cắt giảm tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
• Sử dụng React's UsEffect để tối ưu hóa hiệu suất của ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của nút
• Khám phá cách làm động ứng dụng ứng dụng React của bạn với Animxyz
• Khám phá Tauri, một khuôn khổ mới để xây dựng các nhị phân
• So sánh NestJS so với Express.js

Thiết kế mặt tiền

Tạo một tệp có tên

import React from 'react';
import { View, Text, SafeAreaView } from 'react-native';
import style from './App.module.css';

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

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

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    backgroundColor: '#6804CD',
    width: '100%',
    height: 30,
  },
  text: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
});

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

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    backgroundColor: '#6804CD',
    width: '100%',
    height: 30,
  },
  text: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
});

Đây là một thiết kế khá đơn giản. Có các yếu tố văn bản, nút và hình ảnh bên trong. Ngoài ra còn có một thanh ứng dụng ở trên cùng, được tạo bằng gói giấy phản ứng. Nó chỉ là một thiết kế để trình diễn sake sake; Không có chức năng.

import React from 'react';
import { View, Text, SafeAreaView } from 'react-native';
import style from './App.module.css';

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

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

export default function App() {
  return (
    <>
      
        
          Alpha
          Bravo
          Charlie
          Delta
          Echo
          Foxtrot
        
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    backgroundColor: '#6804CD',
    width: '100%',
    height: 30,
  },
  text: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
});

Có khá nhiều kiểu CSS ở đây. Chúng được đặt tên một cách thích hợp, vì vậy thật dễ hiểu họ đang ở đâu trong mã và những gì họ làm.

Xem thiết kế cuối cùng dưới đây:

Sự kết luận

Như bạn có thể thấy, việc sử dụng các mô -đun CSS trong một ứng dụng gốc React rất đơn giản. Đây là một ví dụ khá đơn giản; Tất nhiên, sức mạnh thực sự của các mô -đun CSS trở nên rõ ràng khi bạn có nhiều tệp mà tất cả đều có thành phần. Tạo các phong cách phạm vi cục bộ sẽ cải thiện đáng kể khả năng đọc và độ sạch của cơ sở mã của bạn.

Logrocket: Các vấn đề tái tạo ngay lập tức trong các ứng dụng gốc React của bạn.

Logrocket là một giải pháp giám sát bản địa phản ứng giúp bạn tái tạo các vấn đề ngay lập tức, ưu tiên lỗi và hiểu hiệu suất trong các ứng dụng gốc React của bạn.

Logrocket cũng giúp bạn tăng tỷ lệ chuyển đổi và sử dụng sản phẩm bằng cách hiển thị chính xác cách người dùng tương tác với ứng dụng của bạn. Phân tích sản phẩm của Logrocket có bề mặt lý do tại sao người dùng không hoàn thành một luồng cụ thể hoặc không áp dụng một tính năng mới.

Bắt đầu chủ động theo dõi các ứng dụng tự nhiên phản ứng của bạn - hãy thử logrocket miễn phí.