Question

我只需要一个简单的按钮，里面有黑色文字，就可以看到清晰的颜色。但是基本按钮具有白色文本。我需要一些更改文字颜色的方法。 My curent app

<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内使用文本并为文本赋予颜色。

<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 中的按钮具有有限的样式属性您可以在其中使用带有 Text 属性的 TouchableOpacity 或 TouchableHeightlight，所以最后你可以使用 View 的 Styling 属性作为 Touchable Component 以及 Text 属性

    <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！这是如果你还没有解决它，

更改按钮文字颜色

5 个答案: