React Native CSS样式改写方法及border-radius特殊语法报错求助

Hey there! Let's tackle your two React Native styling questions step by step:

React Native uses a JavaScript-based styling system that's similar to CSS but with key differences. Here's how to convert your regular CSS to React Native styles:

• CamelCase property names: Unlike CSS's kebab-case, React Native uses camelCase for all style properties. For example:

  • CSS background-color → React Native backgroundColor
  • CSS border-radius → React Native borderRadius
  • CSS font-size → React Native fontSize

  Example conversion:
  CSS:

  .card {
    background-color: #f5f5f5;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  

  React Native:

  import { StyleSheet } from 'react-native';
  
  const styles = StyleSheet.create({
    card: {
      backgroundColor: '#f5f5f5',
      paddingVertical: 12,
      paddingHorizontal: 16,
      borderRadius: 8,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 4,
      elevation: 2, // For Android shadow
    },
  });
  

• No unit suffixes: React Native uses logical pixels by default, so you don't need to add px to numeric values. Percentages are supported for some properties (like width/height), but make sure the parent container has a defined size.

• Flexbox differences: React Native's Flexbox is based on CSS Flexbox but has defaults like flexDirection: 'column' (instead of CSS's row). There's no float property, and position: absolute works relative to the nearest positioned parent (just like CSS, but you'll use top, left, right, bottom to position elements).

• No pseudo-classes or media queries: React Native doesn't support CSS pseudo-classes like :hover or media queries. For interactive states (like button presses), use component props (e.g., TouchableOpacity's activeOpacity). For responsive layouts, use JavaScript APIs like Dimensions or useWindowDimensions to adjust styles based on screen size.

• Style reuse: Instead of CSS classes, you can combine styles using arrays (e.g., style={[styles.base, styles.custom]}) or create reusable style objects/functions.

That error happens because React Native's borderRadius property doesn't support the CSS syntax for elliptical borders (where you separate horizontal and vertical radii with a slash). The parser tries to cast your string value to a number, which fails.

To replicate the CSS border-radius: 50% / 100% effect in React Native, you need to set each corner's radius individually using an array that defines the horizontal and vertical radius for that corner:

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  ovalShape: {
    // Equivalent to CSS: border-radius: 50% / 100%
    borderTopLeftRadius: ['50%', '100%'],
    borderTopRightRadius: ['50%', '100%'],
    borderBottomLeftRadius: ['50%', '100%'],
    borderBottomRightRadius: ['50%', '100%'],
    width: 100,
    height: 200,
    backgroundColor: '#2196F3',
  },
});

Each corner radius array takes two values: the first is the horizontal radius, the second is the vertical radius. This will create the exact elliptical border you're aiming for, matching the CSS behavior.

If you're trying to make a perfect oval, you can also adjust the width and height ratio along with this radius setup to get the desired shape.

内容的提问来源于stack exchange，提问作者rasaq ganiu