React Native组件属性值：引号与大括号的使用场景及规范咨询

Great question—this is one of the most common gotchas when starting with React Native (and React in general)! Let’s break down the rule clearly so you’ll never mix them up again.

Core Rule: Static Strings vs. JavaScript Expressions #

The difference all comes down to what kind of value you’re passing to the prop:

1. Use Quotes ("" or '') for Static String Literals #

Wrap prop values in quotes when you’re passing a fixed, plain string that doesn’t need any JavaScript processing. This tells React Native to treat the value as a direct, unmodified string input.

Take your example:

<Button title="Press me" />

Here, "Press me" is a static text label—no variables, functions, or calculations are needed, so quotes are the cleanest, correct choice.

Other common examples:

• <Text style={{color: "darkgreen"}}>Welcome</Text> (the "darkgreen" is a static color string)
• <Image alt="Profile Picture" /> (the alt text is a fixed string)

2. Use Curly Braces ({}) for JavaScript Expressions #

Wrap prop values in curly braces when you need to pass any value that’s evaluated as JavaScript. This includes:

• Variables (e.g., userName, isFormValid)
• Functions (like your onPress handler)
• Objects/arrays (e.g., style objects)
• Numbers, booleans, or math calculations
• Dynamic string builds (concatenation or template literals)

Back to your example:

<Button onPress={() => console.log("Hello")} />

The arrow function () => console.log("Hello") is a JavaScript expression—React Native needs to recognize it as executable code, not a string. Curly braces signal: "Hey, this isn’t plain text—run this JS code!"

More examples to drive the point home:

• <Text>Hello, {userName}</Text> (passing a user-defined variable)
• <Button disabled={isSubmitDisabled} /> (passing a boolean variable)
• <View style={{padding: 15, borderRadius: 8}} /> (passing a style object, which is a JS expression)
• <Text>Your score: {score + 10}</Text> (passing the result of a calculation)

A Quick Edge Case: Static Strings in Curly Braces #

You might see code like <Button title={"Press me"} /> and wonder why it works—this is technically valid! Wrapping a static string in curly braces treats it as a JavaScript string literal, which behaves exactly the same as passing it in quotes. The only time you’d need this is if you’re dynamically building the string, like title={"Hello, " + userName}. For pure static text, quotes are simpler.

Recap to Memorize #

• ✅ Quotes: Static, unchanging strings with no JS logic involved.
• ✅ Curly Braces: Anything that needs JavaScript to compute—variables, functions, objects, numbers, booleans, etc.

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