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

반응 네이티브를 사용하여 안드로이드 앱을 만들고 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>

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

이 기본 기반에는 솔루션이 있습니다.

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

텍스트를 비활성화하려면 다음과 같이 텍스트 스타일에서 불투명도 : 0을 설정해야합니다.

<TouchableOpacity style={{opacity:0}}>
  <Text>I'm disabled</Text>
</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
    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은 버튼의 비활성화 여부에 따라 스타일을 유지 한 다음 style={this.state.validity ? SignUpStyleSheet.inputStyle : [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]}버튼이 비활성화 된 경우 불투명도 속성을 추가합니다.

버튼을 활성화하거나 비활성화 할 수 있으며 조건을 사용하거나 기본적으로 직접 비활성화됩니다 : 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>

가장 효율적인 방법은 touchableOpacity를 뷰로 감싸고 prop 조건 이벤트를 스타일 조건으로 추가하는 것입니다.

<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
  }