使用react-native-gifted-chat遇ParsedText样式键无效警告求助

The Problem #

You’re hitting this warning because the linkStyle passed to parsePatterns is being converted into an object with numeric keys (like 0, 1)—a structure that ParsedText doesn’t accept as valid style input. Here’s the breakdown of what’s happening with your code:

• In renderMessageText, you’re passing linkStyle as an object split into left and right properties.
• When you spread ...linkStyle inside parsePatterns, this structure gets transformed into a numeric-keyed object (matching the warning’s error output), which violates ParsedText’s style prop rules.

Solution 1: Simplify linkStyle (if left/right styles are identical) #

Since you’re setting the same darkturquoise color for both left and right messages, you can skip splitting into left/right and pass a single style object directly:

renderMessageText(messageTextProps) { 
  return ( 
    <MessageText {...messageTextProps} linkStyle={{ color: 'darkturquoise' }} /> 
  ); 
}

Your parsePatterns can then safely spread the simplified linkStyle without creating invalid keys:

<GiftedChat 
  messages={this.state.messages} 
  onSend={this.onSend} 
  user={user} 
  showUserAvatar={true} 
  renderUsernameOnMessage={true} 
  showAvatarForEveryMessage={true} 
  renderMessageText={this.renderMessageText} 
  parsePatterns={(linkStyle) => [ 
    { pattern: /#(\w+)/, style: { ...linkStyle, color: '#A4A4A4' }, onPress: this.onPressHashtag } 
  ]} 
/>

Solution 2: Normalize linkStyle (for different left/right styles) #

If you need distinct styles for left and right messages, you’ll need to convert the split linkStyle into a single valid style object before using it in parsePatterns. This handles cases where linkStyle might come as an array or a split left/right object:

parsePatterns={(linkStyle) => {
  // Convert linkStyle into a single, valid style object
  const normalizedStyle = Array.isArray(linkStyle) 
    ? Object.assign({}, ...linkStyle) 
    : typeof linkStyle === 'object' && linkStyle !== null
      ? { ...linkStyle.left, ...linkStyle.right } // Pick specific side if needed instead of merging
      : {};

  return [
    { 
      pattern: /#(\w+)/, 
      style: { ...normalizedStyle, color: '#A4A4A4' }, 
      onPress: this.onPressHashtag 
    }
  ];
}}

Why This Works #

ParsedText requires standard React Native style objects with valid CSS-like keys (e.g., color, textDecorationLine), not numeric keys. By simplifying or normalizing the linkStyle before combining it with your hashtag style, you eliminate the invalid structure that triggers the warning.

内容的提问来源于stack exchange，提问作者L.G