React-Sketchapp中如何设置文本对齐为Auto而非Fixed及按钮功能实现

Hey there! Awesome work getting your style guide off the ground with Symbols and the Styleguide repo—super solid start for a React-Sketchapp newbie. Let’s break down your two questions with clear, actionable solutions:

1. Setting Text to "Auto" Alignment (Instead of Fixed) in Sketch #

By default, React-Sketchapp’s Text component renders with a fixed width in Sketch, forcing you to manually adjust it later. To switch to Sketch’s "Auto" width (where the text box adapts to its content), just add the fixedWidth={false} prop to your Text elements.

Here’s a quick example:

import { Text } from 'react-sketchapp';

// Auto-width text that adapts to content
<Text
  style={{
    fontSize: 16,
    color: '#2D3748',
    textAlign: 'left' // You can still set text alignment here
  }}
  fixedWidth={false} // This is the key prop!
>
  This text will automatically fit its content in Sketch
</Text>

If you’re using this inside a Symbol, apply the same fixedWidth={false} prop to the Text component within your Symbol definition. All instances of that Symbol will inherit this auto-width behavior, so you won’t have to tweak each one manually in Sketch.

2. Building a Button Component That Matches Your Expected Functionality #

To create a button that looks and behaves like your intended design, combine React-Sketchapp’s View and Text components, and style them to match your brand. We can replicate full visual styles in code, plus add basic interactivity hints for Sketch.

Here’s a reusable button component example:

import { View, Text, StyleSheet } from 'react-sketchapp';

const Button = ({ label, variant = 'primary', disabled = false }) => {
  // Define styles based on variant and state
  const buttonStyles = StyleSheet.create({
    base: {
      paddingHorizontal: 20,
      paddingVertical: 10,
      borderRadius: 6,
      cursor: disabled ? 'not-allowed' : 'pointer', // Sketch cursor hint
      opacity: disabled ? 0.6 : 1,
    },
    primary: {
      backgroundColor: '#2563EB',
    },
    secondary: {
      backgroundColor: '#E2E8F0',
    },
    label: {
      fontSize: 14,
      fontWeight: 500,
      textAlign: 'center',
      fixedWidth: false, // Auto-width text inside the button
    },
    primaryLabel: {
      color: '#FFFFFF',
    },
    secondaryLabel: {
      color: '#1E293B',
    },
  });

  return (
    <View style={[buttonStyles.base, variant === 'primary' ? buttonStyles.primary : buttonStyles.secondary]}>
      <Text style={[buttonStyles.label, variant === 'primary' ? buttonStyles.primaryLabel : buttonStyles.secondaryLabel]}>
        {label}
      </Text>
    </View>
  );
};

// Usage examples
<Button label="Primary Action" variant="primary" />
<Button label="Secondary Action" variant="secondary" />
<Button label="Disabled Button" disabled={true} />

Quick Note on Sketch Interactivity: #

• The cursor prop tells Sketch to show a pointer (or disabled cursor) when hovering over the button, mimicking interactive behavior.
• For full Sketch-native interactivity (like linking to another artboard or triggering a Symbol override), you’ll need to set that up manually in Sketch after rendering. But all visual styles and basic state handling (disabled, variants) are handled entirely in code.

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