React-native：覆蓋外部組件的樣式

Question

我從npm下載了一個非常好用的組件，但是我想知道是否有辦法覆蓋這個組件的默認樣式？ 就像我可以覆蓋樣式，如果我使用CSS。

該樣式當前在node_modules/react-native-floating-label-text-input中的組件的index.js文件中定義。

我想做這樣的事情：

<FloatLabelTextInput style={styles.textbox} />

const styles = StyleSheet.create({
  textbox: {
    container: {
      height: 30,
      backgroundColor: 'red'
    }, etc...
   }
});

styles.textbox包含組件的所有新樣式。 我正在使用此組件作為示例，但這可以適用於來自npm任何組件。

謝謝。

Answer 1

許多react-native組件構建為接收樣式道具，而樣式道具又用於覆蓋相應內部組件的默認樣式。 如果沒有記錄這些，你可以嘗試檢查模塊的源代碼，看它是否收到任何這樣的道具（不一定必須稱為style ）。

我回顧了這個特定的模塊，遺憾的是它似乎沒有接受除selectionColor之外的任何樣式道具，它可以讓你在輸入聚焦時改變標簽的顏色。

為了反駁你的例子，我將提到react-native-floating-labels ，它支持labelStyle ， inputStyle和style props，分別覆蓋默認標簽，TextInput和容器樣式。

如果組件不支持任何樣式屬性，則沒有一種真正的方法可以覆蓋其樣式，因為您發送的任何其他道具都將被忽略。

編輯 - 我剛剛意識到這個問題已經超過一年了，但我想也許有人會發現它很有用，因為它仍然會出現在Google上