javascript - react native 按钮样式不起作用

Question

我正在使用 native react 来创建一个测试应用程序，当我进行样式设置时，对按钮没有任何影响。谁能告诉我我做错了什么。例如，我正在尝试为按钮添加红色，但它不起作用。我该怎么做才能让它正确？

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

Answer 1

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

检查链接 here

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

如果您为您的 View 容器提供一些样式，它会起作用，但不适用于按钮，因为它不支持这种方式。

解决方案:

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

希望对您有所帮助!