如何更改反應原生按鈕的背景顏色

我想改變我的按鈕的背景顏色，但似乎沒有工作，我試着提出的屬性，也許我錯誤地使用它。你們有沒有任何想法？如何更改反應原生按鈕的背景顏色

import React from 'react'; 
import { StyleSheet, Text, View, Button, TouchableHighlight } from 'react-native'; 

export default class App extends React.Component { 
state={ 
    name: "Mamadou" 
}; 

myPress =() => { 
    this.setState({ 
    name: "Coulibaly" 
    }); 
}; 

    render() { 
    return (
     <View style={styles.container}> 

      <Button  
      title={this.state.name} 
      color="red" 
      onPress={this.myPress} 
     /> 

     </View> 

    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: '#fff', 
    alignItems: 'center', 
    justifyContent: 'center', 
    }, 

});

來源

2017-06-28 Mamadou Coulibaly

你應該接受一個答案給別人你覺得回答了你的問題的最佳。 –

您應該使用十六進制代碼backgroundColor="#FF0000"代替color="red"。另請請使用raised={true}其他明智的背景顏色不覆蓋。

來源

2017-06-28 09:24:05

我補充說，它仍然不能正常工作 –

「color」屬性僅適用於背景，如果您正在爲android構建。

除此之外，我個人覺得更容易管理自定義按鈕。這就是創建你自己的名爲button的組件，並將它作爲一個包含文本的視圖。這種方式更易於管理，您可以像導入Button一樣方便地導入它。

來源

2017-06-28 10:37:16 Medardas

我如何真正創建一個新組件，我是新來的，以迴應本地大聲笑。 –

=]]你真的在你的問題中顯示一個組件：導出默認類應用程序擴展React.Component {} 應用程序是一個組件，你可以通過在任何其他文件的頂部添加這樣的行來導入它：從「/ location/to/App/component」導入 – Medardas

用這個iOS中添加背景色按鈕：

樣式：

loginScreenButton:{ 
    marginRight:40, 
    marginLeft:40, 
    marginTop:10, 
    paddingTop:10, 
    paddingBottom:10, 
    backgroundColor:'#1E6738', 
    borderRadius:10, 
    borderWidth: 1, 
    borderColor: '#fff' 
    }, 
    loginText:{ 
     color:'#fff', 
     textAlign:'center', 
     paddingLeft : 10, 
     paddingRight : 10 
    }

按鈕：

<TouchableOpacity 
      style={styles.loginScreenButton} 
      onPress={() => navigate('HomeScreen')} 
      underlayColor='#fff'> 
      <Text style={styles.submitText}>Login</Text> 
</TouchableOpacity>

對於Android的它僅僅只用按鈕顏色屬性的工作原理：

<Button onPress={onPressAction} title="Login" color="#1E6738" accessibilityLabel="Learn more about this button" />

來源

2017-10-12 10:44:18

我建議使用React Native Elements包，它允許插入風格throught buttonStyle財產。

風格：

const styles = StyleSheet.create({ 
    container: { 
     flex: 1 
    }, 
    button: { 
     backgroundColor: '#00aeef', 
     borderColor: 'red', 
     borderWidth: 5, 
     borderRadius: 15  
    } 
})

渲染（）

render() { 
    return (
     <View style={style.container}> 
      <Button 
      buttonStyle={style.button} 
      title="Example" 
      onPress={() => {}}/> 
     </View> 
    ) 
}

影響：

來源

2018-01-25 15:16:29 bodolsog

如何更改反應原生按鈕的背景顏色

回答

相關問題