Реагировать на родной расширяемый вид проблемы - PullRequest
Новая
       14

Реагировать на родной расширяемый вид проблемы

0 голосов
/ 04 июля 2018

Это мой компонент использования 

  <Panel title="ABC Trade & Investments (Pvt) LTd" amount="$,350.00 LKR">
              <View style={{ flex: 1 }}>
                <View style={{ flex: 1 }}>
                  <TextInput style={styles.textBox} />
                </View>
                <View style={styles.container}>
                  <TouchableHighlight
                    style={styles.buttonContainerOK}
                    onPress={this.onPressLearnMore}
                    underlayColor="#a7ccaf"
                  >
                    <Image
                      style={styles.buttonImage}
                      source={require("./assets/img/ic_done_24px.png")}
                    />
                  </TouchableHighlight>

                  <View style={styles.space} />

                  <TouchableHighlight
                    style={styles.buttonContainerDelete}
                    onPress={this.onPressLearnMore}
                    underlayColor="#f79191"
                  >
                    <Image
                      style={styles.buttonImage}
                      source={require("./assets/img/ic_clear_24px.png")}
                    />
                  </TouchableHighlight>
                </View>
              </View>
            </Panel>

Здесь я добавляю свой код компонента 

class Panel extends Component {
  constructor(props) {
    super(props);

    this.icons = {
      up: require("../assets/img/Arrowhead-01-128.png"),
      down: require("../assets/img/Arrowhead-Down-01-128.png")
    };

    this.state = {
      title: props.title,
      expanded: false,
      animation: new Animated.Value()
    };
  }

  onPressLearnMore() {
    console.log("Test");
  }

  componentWillMount() {
    console.log("this.state.expanded => " + this.state.expanded);
    console.log("this.state.maxHeight => " + this.state.maxHeight);
    console.log("this.state.minHeight => " + this.state.minHeight);
  }

  toggle() {
    let initialValue = this.state.expanded
        ? this.state.maxHeight + this.state.minHeight
        : this.state.minHeight,
      finalValue = this.state.expanded
        ? this.state.minHeight
        : this.state.maxHeight + this.state.minHeight;

    this.setState({
      expanded: !this.state.expanded
    });
    console.log("initialValue => " + initialValue);

    this.state.animation.setValue(initialValue);
    Animated.spring(this.state.animation, {
      toValue: finalValue
    }).start();

    console.log("finalValue => " + finalValue);
  }

  _setMaxHeight(event) {
    if (!this.state.maxHeight) {
      console.log("_setMaxHeight  => " + event.nativeEvent.layout.height);
      this.setState({
        maxHeight: event.nativeEvent.layout.height
      });
    }
  }

  _setMinHeight(event) {
    if (!this.state.minHeight) {
      console.log("_setMinHeight ! => " + event.nativeEvent.layout.height);
      this.setState({
        minHeight: event.nativeEvent.layout.height,
        animation: new Animated.Value(event.nativeEvent.layout.height)
      });
    }
  }

  render() {
    let icon = this.icons["down"];

    if (this.state.expanded) {
      icon = this.icons["up"];
    }

    return (
      <Animated.View
        style={[styles.container, { height: this.state.animation }]}
      >
        <View
          style={styles.titleContainer}
          onLayout={this._setMinHeight.bind(this)}
        >
          <View style={styles.header}>
            <Text style={styles.title}>{this.state.title}</Text>
            <Text style={styles.amount}>4,350.00 LKR</Text>
          </View>

          <TouchableHighlight
            style={styles.toggle_button}
            onPress={this.toggle.bind(this)}
            underlayColor="#f1f1f1"
          >
            <Image style={styles.buttonImage} source={icon} />
          </TouchableHighlight>

          <TouchableHighlight
            style={styles.approve_button}
            onPress={this.onPressLearnMore}
            underlayColor="#a7ccaf"
          >
            <Image
              style={styles.listButtonImage}
              source={require("../assets/img/ic_done_24px.png")}
            />
          </TouchableHighlight>

          <View style={styles.space} />

          <TouchableHighlight
            style={styles.reject_button}
            onPress={this.onPressLearnMore}
            underlayColor="#f79191"
          >
            <Image
              style={styles.listButtonImage}
              source={require("../assets/img/ic_clear_24px.png")}
            />
          </TouchableHighlight>
        </View>
        <View style={styles.body} onLayout={this._setMaxHeight.bind(this)}>
          {this.props.children}
        </View>
      </Animated.View>
    );
  }
}

Проблема в том, что я добавил TextInput в расширенную Panel.Но после того, как я щелкнул по нему, мое представление свернуто. Здесь я приложу изображение двух моих сценариев.

enter image description here

Кажется, проблема возникает из-за onLayout = {this._setMaxHeight.bind (this)} этого кода. Но я не смог решить эту проблему. Пожалуйста, помогите мне.

К вашему сведению - это ссылка, на которую я ссылаюсь, чтобы построить это - https://moduscreate.com/blog/expanding-and-collapsing-elements-using-animations-in-react-native/

1 Ответ

0 голосов
/ 04 июля 2018

Похоже, здесь происходило вложенное всплытие событий. Вы можете избежать этого, добавив события onFocus и onKeyPress в свой TextInput и обработав родительское событие следующим образом: 

<TextInput
  onFocus={this.restrictParentClick.bind(this)}
  onKeyPress={this.restrictParentClick.bind(this)}
/>

И это будет ваша функция restrictParentClick следующим образом: 

restrictParentClick (evnt) {
  evnt.preventDefault()
  evnt.stopPropagation();
  if(evnt.nativeEvent)
    evnt.nativeEvent.stopImmediatePropagation();
  }
}
...