반응-원어민 버튼 스타일이 작동하지 않음

반응-원어민 버튼 스타일이 작동하지 않음

Import_this

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

이것은 내 리액트 버튼 코드입니다. 그러나 스타일은 작동하지 않습니다. Hare...

<Button
  onPress={this.onPress.bind(this)} 
  title={"Go Back"}
  style={{color: 'red', marginTop: 10, padding: 10}}
/>

또한 나는 이 코드에 의해 시도되었다.

<Button 
       containerStyle={{padding:10, height:45, overflow:'hidden', 
       borderRadius:4, backgroundColor: 'white'}}
       style={{fontSize: 20, color: 'green'}} 
       onPress={this.onPress.bind(this)} title={"Go Back"}
      > Press me!
</Button>

질문 업데이트:

그리고 이쪽에서 시도받았는데..

<Button
    onPress={this.onPress.bind(this)}
    title={"Go Back"}
    style={styles.buttonStyle}
>ku ka</Button>

스타일.

const styles = StyleSheet.create({
    buttonStyle: {
        color: 'red',
        marginTop: 20,
        padding: 20,
        backgroundColor: 'green'
    }
});

하지만 No out : 내 핸드폰 스크린샷 :-

React Native 버튼은 매우 제한적으로 사용할 수 있습니다.

스타일 소품도 없고 "웹웨이"처럼 텍스트를 설정하지 않습니다.<Button>txt</Button>그러나 제목 속성을 통해<Button title="txt" />

외관을 보다 효과적으로 제어하고 싶다면 Touchable XXXX의 컴포넌트 중 하나인 Touchable Opacity를 사용해야 합니다.이 컴포넌트는 매우 사용하기 쉽습니다:-)

마진과 패딩에 문제가 있었습니다.Button.버튼을 추가했습니다.View컴포넌트 및 프로퍼포먼스에적용합니다.View.

<View style={{margin:10}}>
<Button
  title="Decrypt Data"
  color="orange"
  accessibilityLabel="Tap to Decrypt Data"
  onPress={() => {
    Alert.alert('You tapped the Decrypt button!');
  }}
  />  
</View>

React Native 버튼은 매우 제한된 옵션입니다.Touchable Highlight 또는 Touchable Opacity는 이러한 요소를 스타일링하고 버튼으로 감싸서 사용할 수 있습니다.

             <TouchableHighlight 
                style ={{
                    height: 40,
                    width:160,
                    borderRadius:10,
                    backgroundColor : "yellow",
                    marginLeft :50,
                    marginRight:50,
                    marginTop :20
                }}>
            <Button onPress={this._onPressButton}            
            title="SAVE"
            accessibilityLabel="Learn more about this button"
          /> 
          </TouchableHighlight> 

커스터마이즈된 버튼에는 리액트라이브러리도 사용할 수 있습니다.리액션 버튼(https://www.npmjs.com/package/react-native-button))이 좋은 라이브러리 중 하나입니다.

독자적인 버튼 컴포넌트를 작성하지 않는 경우는 버튼을 뷰로 감아 레이아웃 스타일링이라도 적용할 수 있도록 하는 것이 빠르고 지저분한 방법입니다.

예를 들어, 다음과 같은 버튼의 행이 생성됩니다.

<View style={{flexDirection: 'row'}}>
    <View style={{flex:1 , marginRight:10}} >
        <Button title="Save" onPress={() => {}}></Button>
    </View>
    <View style={{flex:1}} >
        <Button title="Cancel" onPress={() => {}}></Button>
    </View>
</View>

버튼을 사용하는 대신 텍스트를 리액트 네이티브로 사용한 후 터치 가능한 상태로 만들 수 있습니다.

<TouchableOpacity onPress={this._onPressButton}> 
   <Text style = {'your custome style'}>
       button name
   </Text>
</TouchableOpacity >

단추의 스타일이 작동하지 않습니다. 보기에 스타일을 지정해야 합니다.

<View style={styles.styleLoginBtn}>
          <Button
            color="orange" //button color
            onPress={this.onPressButton}
            title="Login"
          />
        </View>

이 스타일을 표시할 수 있습니다.

const styles = StyleSheet.create({
  styleLoginBtn: {
    marginTop: 30,
    marginLeft: 50,
    marginRight: 50,
    borderWidth: 2,
    borderRadius: 20,
    borderColor: "black", //button background/border color
    overflow: "hidden",
    marginBottom: 10,
  },
});

자체 학습만 하지만 보기에서 줄 바꿈으로써 단추 주위에 스타일을 추가할 수 있습니다.

const Stack = StackNavigator({
  Home: {
    screen: HomeView,
    navigationOptions: {
      title: 'Home View'
    }
  },
  CoolView: {
    screen: CoolView,
    navigationOptions: ({navigation}) => ({
      title: 'Cool View',
      headerRight: (<View style={{marginRight: 16}}><Button
        title="Cool"
        onPress={() => alert('cool')}
      /></View>
    )
    })
  }
})

이거 드셔보세요.

<TouchableOpacity onPress={() => this._onPressAppoimentButton()} style={styles.Btn}>
    <Button title="Order Online" style={styles.Btn} > </Button>
</TouchableOpacity>

사용할 수 있습니다.Pressable와 함께Text버튼 대신.

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

<Pressable style={styles.button} onPress = {() => console.log("button pressed")}> 
  <Text style={styles.text}>Press me</Text>
</Pressable>

스타일 예시:

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

사용할 수 있습니다.buttonStyle지금 당장 준비하세요.
https://react-native-training.github.io/react-native-elements/docs/button.html#buttonstyle

리액트 네이티브 버튼은 매우 한정되어 있기 때문에 스타일링을 할 수 없습니다.react native elements 버튼 또는 custom 버튼 작성

버튼 스타일은 리액트 네이티브에서는 동작하지 않습니다.버튼을 리액트 네이티브로 간단하게 스타일링 하려면 다음과 같이 뷰 블록에 넣습니다.

      <View
         style={styles.buttonStyle}>
         <Button
         title={"Sign Up"}
         color={"#F31801"}/>
      </View>

style. 버튼 스타일은 다음과 같습니다.

style.buttonStyle{
        marginTop:30,
        marginLeft:50,
        marginRight:50,
        borderWidth:2,
        borderRadius:20,
        borderColor:'#F31801',
        overflow:"hidden",
        marginBottom:10,
}

단추가 달린 디자인을 사용할 수 있습니다.

@plaul의 답변에 따르면TouchableOpacity 다음과

  <TouchableOpacity
    style={someStyles}
    onPress={doSomething}
  >
    <Text>Press Here</Text>
  </TouchableOpacity>

제안:

사용을 권장합니다.react-native-paper 수정이 가능합니다.react-native구성 요소들.

설치 방법: npm react-native-paper 설치

그런 다음 간단하게 Import하여 사용할 수 있습니다.

자세한 내용은 이쪽

뷰 구성요소 내에서 버튼 구성요소를 줄 바꿈하고 뷰 구성요소의 스타일을 변경하면 됩니다.아래 토막을 참조해 주세요.

     <View style={{width: 150, alignSelf: 'center'}}>
       <Button onPress={demoFunction} title="clickMe!!" />
     </View>

 

이게 괴사 포스트라는 건 알지만, 버튼 자체에 여백 상단과 여백 하단을 추가하는 정말 쉬운 방법을 찾았어요.

인라인이든 전달할 객체를 생성하여 스타일을 작성할 때 다음을 수행할 수 있습니다.

var buttonStyle = {
   marginTop: "1px",
   marginBottom: "1px"
}

값 주위에 따옴표를 붙이면 효과가 있는 것 같습니다.2년 전에 게시된 React와 비교한 React의 최신 버전이기 때문인지는 모르겠지만, 지금은 작동한다는 것은 알고 있습니다.

언급URL : https://stackoverflow.com/questions/43585297/react-native-button-style-not-work