반응 네이티브 버튼의 배경색을 변경하는 방법

반응 네이티브 버튼의 배경색을 변경하는 방법

버튼의 배경색을 변경하려고 하는데, 아무것도 작동하지 않는 것 같습니다.올려진 속성을 사용해보니 잘못 사용하고 있는 것 같습니다.생각나는 사람 있어요?

 import React from 'react';
 import { StyleSheet, Text, View, Button, TouchableHighlight } from 'react-native';

export default class App extends React.Component {
state={
  name: "Mamadou"
};

myPress = () => {
  this.setState({
    name: "Coulibaly"
  });
};

  render() {
    return (
      <View style={styles.container}>

          <Button       
          title={this.state.name}
          color="red"
          onPress={this.myPress}
        />   

      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },

});

iOS의 버튼에 배경색을 추가할 때 사용합니다.

스타일:

  loginScreenButton:{
    marginRight:40,
    marginLeft:40,
   marginTop:10,
    paddingTop:10,
    paddingBottom:10,
    backgroundColor:'#1E6738',
    borderRadius:10,
    borderWidth: 1,
    borderColor: '#fff'
  },
  loginText:{
      color:'#fff',
      textAlign:'center',
      paddingLeft : 10,
      paddingRight : 10
  }

버튼:

<TouchableOpacity
          style={styles.loginScreenButton}
          onPress={() => navigate('HomeScreen')}
          underlayColor='#fff'>
          <Text style={styles.loginText}>Login</Text>
 </TouchableOpacity>

Android의 경우 버튼 색상 속성에서만 작동합니다.

<Button  onPress={onPressAction}  title="Login"  color="#1E6738"  accessibilityLabel="Learn more about this button" />

스타일을 삽입할 수 있는 React Native Elements 패키지를 사용하는 것이 좋습니다.buttonStyle소유물.

스타일:

const styles = StyleSheet.create({
   container: {
      flex: 1
   },
   button: {
      backgroundColor: '#00aeef',
      borderColor: 'red',
      borderWidth: 5,
      borderRadius: 15       
   }
})

렌더링()

render() {
   return (
      <View style={styles.container}>
          <Button
             buttonStyle={styles.button}
             title="Example"
             onPress={() => {}}/>
      </View>
   )
}

효과:

엑스포 스낵 : https://snack.expo.io/Bk3zI0u0G

"color" 속성은 Android용으로 빌드하는 경우에만 배경에 적용됩니다.

그 외에는 개인적으로 커스텀 버튼 관리가 더 쉽다고 생각합니다.즉, 버튼이라는 이름의 자체 구성요소를 작성하여 텍스트가 있는 보기로 만듭니다.이렇게 하면 관리성이 향상되고 버튼만큼 쉽게 가져올 수 있습니다.

이 대답은 조금 늦었지만 다른 사람에게 좋을 수 있습니다.이 문제를 해결하려면 "텍스트" 구성요소를 버튼으로 사용하는 것이 좋습니다.

fast는 컴포넌트 이름을 AppButton으로 만듭니다.

function AppButton({children,style,onPress}) {
 return (
   <TouchableOpacity onPress={onPress}>
    <Text
      style={[styles.appButton,style]} >
      {children}
    </Text>
   </TouchableOpacity>
 );
}

export default AppButton;

그런 다음 사용할 위치로 가져옵니다.

import AppButton from './AppButton';

이 행에서는 커스텀 버튼을 커스터마이즈할 수 있습니다.onPress Event는 Text가 아닌 TouchableOpacity를 호출해야 합니다.

<AppButton style={styles.appOk} onPress={()=> visibleFunc(false)} >Ok</AppButton>

아마도요.Pressable버튼과 같은 누름 가능한 컴포넌트에 스타일을 추가할 수 있습니다.자세한 내용은 이쪽

샘플 코드:

import React from 'react';
import { Text, View, StyleSheet, Pressable } from 'react-native';

export default function Button(props) {
  const { onPress, title = 'Save' } = props;
  return (
    <Pressable style={styles.button} onPress={onPress}>
      <Text style={styles.text}>{title}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
    elevation: 3,
    backgroundColor: 'black',
  },
  text: {
    fontSize: 16,
    lineHeight: 21,
    fontWeight: 'bold',
    letterSpacing: 0.25,
    color: 'white',
  },
});

16진수 코드를 사용해야 합니다.backgroundColor="#FF0000"대신color="red". 또, 을 사용해 주세요.raised={true}다른 적절한 배경색은 덮어쓰지 않습니다.

언급URL : https://stackoverflow.com/questions/44798426/how-to-change-background-color-of-react-native-button