버튼 색상 변경 원어민 반응

버튼 색상 변경 원어민 반응

버튼의 색상을 간단하게 변경하고 싶은데 변경할 수 없습니다.버튼을 직접 변경하여 스타일을 전달하려고 했습니다.하지만 둘 다 효과가 없었다.여기 아주 간단한 코드가 있습니다.

 export default class Dots extends Component {
  render() {
    return (
      <Image style={styles.container}  source={require('./background3.png')}>
      <Button title='play' style = {{color:'red'}}/>
      </Image>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor:'transparent',
    resizeMode:'cover',
    justifyContent:'center',
    alignItems:'center',
    width:null,
    height:null
  },

  button:{
  backgroundColor:'#ff5c5c',
  }

}); 

반응Button컴포넌트는 사용하는 각 플랫폼에서 네이티브버튼을 렌더링합니다.이 때문에, 이 디바이스는, 에 응답하지 않습니다.style소품도 있고 소품도 있고

올바른 사용 방법은 다음과 같습니다.

<Button color="#ff5c5c" title="I'm a button!" />

매뉴얼은 https://facebook.github.io/react-native/docs/button.html 에서 보실 수 있습니다.

예를 들어, 슈퍼 커스터마이즈 가능한 버튼을 만들고 싶다면 뷰와 터치 가능한 불투명도를 사용해야 합니다.이것과 비슷한 뭔가가 있어.

<TouchableOpacity onPress={...}>
  {... button markup}
</TouchableOpacity>

버튼 컴포넌트로 포장하여 사용합니다.

Android와 iOS 플랫폼에서는 Button 태그 대신 Touchable Opacity를 사용하는 것이 좋다고 생각합니다.

다음 코드를 사용할 수 있습니다.버튼과 매우 흡사하며, 다음과 같이 동작합니다.

 <TouchableOpacity
         style={styles.button}
         onPress={this.onPress}
       >
         <Text> Touch Here </Text>
 </TouchableOpacity>

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10
  }
})

예 버튼이 스타일에 응답하지 않습니다.하지만 다른 해결책은 반응-원소 성분을 사용할 수 있다는 것입니다.

먼저 아래에 나와 있는 패키지를 설치합니다.

npm install react-contract-npm i react-contract-npm i react-contract-icons

그런 다음 패키지를 코드로 Import합니다.

    import { Button } from 'react-native-elements';
    import LinearGradient from 'react-native-linear-gradient';
    import Icon from 'react-native-vector-icons/FontAwesome';

    <Button ViewComponent={LinearGradient} // Don't forget this!
    linearGradientProps={{
    colors: ['#ffffff','blue', 'grey'],
    start: { x: 0, y: 0.5 },
    end: { x: 1, y: 0.5 },
    }} onPress={()=> this.props.navigation.navigate('First')} title="Click me"/>

상세한 것에 대하여는, https://react-native-elements.github.io/react-native-elements/docs/button.html 를 참조해 주세요.

이렇게 만들 수 있어요.

<Button title="Hello World!" buttonStyle={styles.btnstylehere}/>

 const styles = StyleSheet.create({
 btnstylehere:{
        width: 75,
        height: 75,
        borderRadius: 0,
        backgroundColor: '#000',
        color: '#fff'

    }
})

언급URL : https://stackoverflow.com/questions/41754471/change-button-color-react-native