Programmiererforum

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(



 this.props.navigation.navigate("Login")} />


)
}
}

class Login extends Component{
static navigationOptions = {
title:'Login'
};
render(){
return(

home


)
}
}

const App = StackNavigator({

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

});

var styles = StyleSheet.create({
container: {

},

button:{

color:'red'

}
});

export default App

Ich verwende React Native, um eine Test-App zu erstellen. Beim Styling habe ich keine Auswirkungen auf eine Schaltfläche. Kann mir jemand sagen, was ich falsch mache?
Ich versuche zum Beispiel, einem Knopf die rote Farbe zu geben, aber es funktioniert nicht.
Was kann ich tun, um es richtig zu machen?

[code]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(



this.props.navigation.navigate("Login")} />


)
}
}

class Login extends Component{
static navigationOptions = {
title:'Login'
};
render(){
return(

home


)
}
}

const App = StackNavigator({

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

});

var styles = StyleSheet.create({
container: {

},

button:{

color:'red'

}
});

export default App
[/code]