Question

我使用react native来创建测试应用程序，在进行样式设置时对按钮没有任何影响。任何人都可以告诉我我做错了什么。例如，我试图将红色设置为按钮，但它不起作用。我能做些什么来做对吗？

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

必须内联。它是按钮的属性，与样式表适用的{{1}}和{{1}}等标记不同，它不像样式属性。

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

解决方案：

{{1}}

希望有所帮助！

Answer 2

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

看看这个：

favorite

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

2 个答案:

解决方案：