反应原生按钮样式不起作用答案

【问题标题】：react native button style not working反应原生按钮样式不起作用
【发布时间】：2017-06-22 09:53:51
【问题描述】：

我正在使用本机反应来创建一个测试应用程序，当我做样式时对按钮没有影响。谁能告诉我我做错了什么。例如，我试图将红色放在按钮上，但它不起作用。我该怎么做才能使它正确？

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Text,
  Button,
  ScrollView,
  Dimensions,
  PanResponder,
  Animated,
  View
} from 'react-native'

import { StackNavigator } from 'react-navigation'





class Home extends Component{

  static navigationOptions = {

   title:'Home'



  };

componentWillMount(){

  this.animatedValue = new Animated.ValueXY();
  this._value = {x:0 , y:0}
  this.animatedValue.addListener((value) => this._value = value);


this.panResponder = PanResponder.create({

 onStartShouldSetPanResponder: (evt, gestureState) => true,
  onMoveShouldSetPanResponder: (evt, gestureState) => true,
  onPanResponderGrant: (e, gestureState) => {

this.animatedValue.setOffset({

x:this._value.x,
y:this._value.y,


})

this.animatedValue.setValue({x:0 , y:0})

      },

  onPanResponderMove:Animated.event([


null,{dx: this.animatedValue.x , dy:this.animatedValue.y}

    ]),  
  onPanResponderRelease: (e, gestureState) => { 

      },       
})
}

  render(){

    var animatedStyle = {

      transform:this.animatedValue.getTranslateTransform()
    }

    return(

        <View style={styles.container}>


         <Button 
         style={styles.button}
         title="Login"
          onPress={() => this.props.navigation.navigate("Login")} />



        </View>
      )
  }
}

class Login extends Component{
   static navigationOptions = {  
   title:'Login'
  };
  render(){  
    return( 
        <View>
        <Text>home</Text>

        </View>
      )
  }
}

const App = StackNavigator({

Home:{ screen: Home},
Login:{ screen:Login}


});

var styles = StyleSheet.create({
  container: {



  },

  button:{


    color:'red'



  }
});


export default App

【问题讨论】：

你尝试过内联样式吗？
内联代码可以正常工作。问题是从外部样式表导入时。
好吧，除了那个代码看起来还可以，只有按钮样式不起作用还是全部不起作用？
是的，内联作品:)

标签： javascript android css reactjs react-native

【解决方案1】：

您不能使用样式表将颜色应用于按钮。

查看链接here

它必须内联。它是按钮的一个属性，不像View 和Text 等标签应用样式表的样式属性。

如果你给你的视图容器一些样式，它会起作用，但不是按钮，因为它不支持这种方式。

解决办法：

    <View style={styles.container}>
      <Button 
       title="Login"
       color="red"
       onPress={() => this.props.navigation.navigate("Login")} />
    </View>

希望有帮助！

【讨论】：

color="red" 在 android 中使按钮 bg 颜色为红色。如何将按钮文本颜色更改为红色？

【解决方案2】：

如果您的按钮看起来不适合您的应用，您可以使用TouchableOpacity 或TouchableNativeFeedback 构建自己的按钮。如需灵感，请查看source code for this button component。或者，看看wide variety of button components built by the community。

看这个：

 <TouchableOpacity
   style={[styles.buttonLargeContainer, styles.primaryButton]}
   onPress={() => {}}>
  <Text style={styles.buttonText}>SEND TO AUCTION?</Text>
 </TouchableOpacity>

const styles = StyleSheet.create({
buttonLargeContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 10
  },
primaryButton: {
    backgroundColor: '#FF0017',
  },
buttonText: {
    color: 'white',
    fontSize: 14,
    fontWeight: 'bold'
  }
})

【讨论】：