반응 기본에서 버튼 비활성화

반응 기본에서 버튼 비활성화

---

반응 네이티브를 사용하여 안드로이드 앱을 만들고 TouchableOpacity 구성 요소를 사용하여 버튼을 만들었습니다.
텍스트 입력 구성 요소를 사용하여 사용자의 텍스트를 수락 하고 텍스트 입력이 특정 문자열과 일치 하면 버튼을 활성화 해야 합니다.
TouchableOpactiy 래퍼없이 버튼을 처음 렌더링하고 입력 문자열이 일치하면 래퍼로 다시 렌더링하여이를 수행하는 방법을 생각할 수 있습니다.
그러나이 작업을 수행하는 훨씬 더 좋은 방법이 있다고 생각합니다. 누구든지 도울 수 있습니까?

---

TouchableOpacityextents TouchableWithoutFeedback이므로 disabled속성을 사용할 수 있습니다 .

<TouchableOpacity disabled={true}>
  <Text>I'm disabled</Text>
</TouchableOpacity>

피드백 # 비활성화 된 문서없이 기본 터치 가능

---

그냥하세요

<TouchableOpacity activeOpacity={disabled ? 1 : 0.7} onPress={!disabled && onPress}>
  <View>
    <Text>{text}</Text>
  </View>
</TouchableOpacity>

---

이것은 상위 컴포넌트를 사용하여 해결할 수있는 것 같습니다. 100 % 자신을 이해하려고 애 쓰고 있기 때문에 잘못 될 수 있지만 어쩌면 그것은 당신에게 도움이 될 것입니다 (여기 링크가 있습니다) ...

• http://www.bennadel.com/blog/2888-experimenting-with-higher-order-components-in-reactjs.htm
• http://jamesknelson.com/structuring-react-applications-higher-order-components/

---

TouchableOpacity가 수신 activeOpacity합니다. 이런 식으로 할 수 있습니다

<TouchableOpacity activeOpacity={enabled ? 0.5 : 1}>
</TouchableOpacity>

활성화되어 있으면 정상으로 보이고 그렇지 않으면 피드백없이 터치 할 수있는 것처럼 보입니다.

---

을 사용하여 CustButton을 빌드하고 , 또는 다른 소품으로 TouchableWithoutFeedback원하는 효과와 논리를 설정할 수 있습니다 .onPressInonPressout

---

스타일 속성에 조건부를 넣어서이 문제를 해결할 수있었습니다.

const startQuizDisabled = () => props.deck.cards.length === 0;

<TouchableOpacity
  style={startQuizDisabled() ? styles.androidStartQuizDisable : styles.androidStartQuiz}
  onPress={startQuiz}
  disabled={startQuizDisabled()}
>
  <Text 
    style={styles.androidStartQuizBtn} 
  >Start Quiz</Text>
</TouchableOpacity>

const styles = StyleSheet.create({
androidStartQuiz: {
    marginTop:25,
    backgroundColor: "green",
    padding: 10,
    borderRadius: 5,
    borderWidth: 1
},
androidStartQuizDisable: {
    marginTop:25,
    backgroundColor: "green",
    padding: 10,
    borderRadius: 5,
    borderWidth: 1,
    opacity: 0.4
},
androidStartQuizBtn: {
    color: "white",
    fontSize: 24
}
})

---

확인 TouchableOpacity안 함 사용하여 다음 코드를 :

<TouchableOpacity disabled={true}>
  <Text>Submit</Text>
</TouchableOpacity>

---

Here's my work around for this I hope it helps :

<TouchableOpacity
    onPress={() => {
        this.onSubmit()
    }}
    disabled={this.state.validity}
    style={this.state.validity ?
          SignUpStyleSheet.inputStyle :
          [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]}>
    <Text style={SignUpStyleSheet.buttonsText}>Sign-Up</Text>
</TouchableOpacity>

in SignUpStyleSheet.inputStyle holds the style for the button when it disabled or not, then in style={this.state.validity ? SignUpStyleSheet.inputStyle : [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]} I add the opacity property if the button is disabled.

---

You can enable and disable button or by using condition or directly by default it will be disable : true

 // in calling function of button 
    handledisableenable()
        {
         // set the state for disabling or enabling the button
           if(ifSomeConditionReturnsTrue)
            {
                this.setState({ Isbuttonenable : true })
            }
          else
          {
             this.setState({ Isbuttonenable : false})
          }
        }

<TouchableOpacity onPress ={this.handledisableenable} disabled= 
     {this.state.Isbuttonenable}>

    <Text> Button </Text>
</TouchableOpacity>

---

I think the most efficient way is to wrap the touchableOpacity with a view and add the prop pointerEvents with a style condition.

<View style={this.state.disabled && commonStyles.buttonDisabled}        
      pointerEvents={this.state.disabled ? "none" : "auto"}>
  <TouchableOpacity
    style={styles.connectButton}>
  <Text style={styles.connectButtonText}">CONNECT </Text>
  </TouchableOpacity>
</View>

CSS:

buttonDisabled: {
    opacity: 0.7
  }

---

this native-base there is solution:

<Button
    block
    disabled={!learnedWordsByUser.length}
    style={{ marginTop: 10 }}
    onPress={learnedWordsByUser.length && () => {
      onFlipCardsGenerateNewWords(learnedWordsByUser)
      onFlipCardsBtnPress()
    }}
>
    <Text>Let's Review</Text>
</Button>

참고URL : https://stackoverflow.com/questions/33407665/disabling-buttons-on-react-native