Я использую реакцию 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
Вы не можете применять цвет к кнопке с помощью таблицы стилей.
Оформить ссылку здесь
Он должен быть встроен. Это свойство кнопки, не похоже на атрибуту стиля, в отличие от тегов, таких как View
и Text
, где применяется таблица стилей.
Если вы придадите некоторый стиль контейнеру вида, он будет работать, но не с кнопкой, так как он не поддерживается таким образом.
<View style={styles.container}>
<Button
title="Login"
color="red"
onPress={() => this.props.navigation.navigate("Login")} />
</View>
Надеюсь, это поможет!
Если ваша кнопка не подходит для вашего приложения, вы можете создать свою собственную кнопку с помощью TouchableOpacity или TouchableNativeFeedback. Для вдохновения посмотрите исходный код этого компонента кнопки. Или взгляните на большое количество компонентов кнопок, созданных сообществом.
Посмотрите:
<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'
}
})