Question

这是我的组件用法

  <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中。但是一旦单击它，我的视图就会折叠起来。在这里，我将附上我的两种情况的图像。

似乎是由于 onLayout = {this._setMaxHeight.bind（this）} 此代码而出现的。但是我无法解决。请帮帮我。

仅供参考-这是我用来构建此链接的链接-https://moduscreate.com/blog/expanding-and-collapsing-elements-using-animations-in-react-native/

Answer 1

似乎在这里发生了嵌套事件冒泡。您可以通过将onFocus和onKeyPress事件添加到yout TextInput来避免这种情况，并需要按以下方式处理父事件：

2017-08-31 15:25  2
2017-08-31 12:25  1
2017-05-30 15:31  1
2017-05-29 15:31  1

这将是您的strictParentClick函数，如下所示：

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

反应本机可扩展视图问题

1 个答案: