☰

React Nativeでコンポーネントを非表示/表示する 質問する

tag-icon • tag-icon javascript react-native
React Nativeでコンポーネントを非表示/表示する 質問する

私は React Native を初めて使い、コンポーネントを非表示/表示する方法を教えてください。
これが私のテストケースです:

<TextInput
    onFocus={this.showCancel()}
    onChangeText={(text) => this.doSearch({input: text})} />

<TouchableHighlight 
    onPress={this.hideCancel()}>
    <View>
        <Text style={styles.cancelButtonText}>Cancel</Text>
    </View>
</TouchableHighlight>

コンポーネントがあり、入力にフォーカスが当たったときに を表示し、ユーザーがキャンセル ボタンを押したときにを非TextInput表示にしたいと考えています。TouchableHighlightTouchableHighlight

TouchableHighlight関数内でコンポーネントを非表示/表示するために、コンポーネントに「アクセス」する方法がわかりませんshowCancel/hideCancel。
また、最初からボタンを非表示にするにはどうすればよいでしょうか?

ベストアンサー1

レンダリング関数では:

{ this.state.showTheThing && 
  <TextInput/>
}

次に、次の操作を実行します。

this.setState({showTheThing: true})  // to show it  
this.setState({showTheThing: false}) // to hide it

おすすめ記事