更改按鈕文本顏色

Question

我只需要一個簡單的按鈕，顏色清晰，里面有黑色文字。 但是基本按鈕有白色文本。 我需要一些東西來改變文本顏色。 我目前的應用

<View style={styles.fastlog}>
  <Button style={styles.bouton}
    title= "Connexion avec Facebook"
    color= "#A2FFA1"/>
  <Button style={styles.bouton}
     title= "Connexion avec Google"
     color= "#A2FFA1"/>
</View>

這有效，我有綠色按鈕，但我找不到文本

Answer 1

在 Button 內使用 Text 並為文本賦予顏色。

<Button
   style={styles.bouton}
   color= "#A2FFA1" 
>
 <Text style={{color: '#fff'}}>Connexion avec Facebook</Text>
</Button

參考： https : //github.com/GeekyAnts/NativeBase/issues/477

Answer 2

對於這種情況，我建議您使用第三方庫或創建customButtonComponent因為可從react-native訪問的 Button 組件沒有很多樣式機會。

另請注意，您使用的道具color僅在Android更改按鈕的背景顏色，而在iOS更改文本顏色。

使用一組TouchableOpacify和Text您應該能夠通過您自己的道具和樣式創建自定義 Button 組件樣式

Answer 3

React Native 中的按鈕具有有限的樣式屬性您可以在其中使用帶有文本屬性的 TouchableOpacity 或 TouchableHeighlight，因此最后您可以使用視圖的樣式屬性作為可觸摸組件以及文本屬性

    <TouchableOpacity style={{...yourStytles}} >
        <Text style={{...yourTextStyles}}></Text>
    </TouchableOpacity>

Answer 4

在安卓上

const styles = StyleSheet.create({
  buttonSearch: {
    backgroundColor: "#F1F1F1",
    borderColor: "#D5D5D5",
    borderWidth: 1,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderTopWidth: 0,
    borderRadius: 0,
  },
  buttonTitleSearch: {
    color: "#33353D",
  },
});

<Button
  navigation={this.props.navigation}
  title={
    this.state.searchPackageId
      ? "Package Id: " + this.state.searchPackageId
      : "Package Id: All"
  }
  // type="outline"
  buttonStyle={styles.buttonSearch}
  titleStyle={styles.buttonTitleSearch}
  onPress={() => {
    var navigation = this.props.navigation;
    console.log(this.state);
    navigation.navigate("PackageIdInput", {
      packageId: this.state.searchPackageId,
      updatePackageId: updatePackageId,
    });
  }}
/>

我們可以到 index.d.ts 中查看組件的格式。

Answer 5

<Button
   style={styles.bouton}
   color= "#A2FFA1" 
   title="this is the title of your button"

>
 <Text style={{color: '#fff'}}>Connexion avec Facebook</Text>
</Button>

您需要明確添加title ！ 這是如果你還沒有解決它，