是否可以动态更改InputAccessoryView的高度?

时间:2018-04-23 23:54:42

标签: react-native

React Native版本0.55附带InputAccessoryView。是否可以动态更改InputAccessoryView的高度?

在下面的示例中,我通过this.state.height将初始高度设置为50。当我按下按钮时,我将this.state.height更新为200,但是不会渲染高度变化(顺便提一下。this.state.backgroundColor更改得到正确渲染。)

另一个用例就是在聊天应用的<TextInput>中包含的粘性<InputAccessoryView>扩展到多行时更改高度。

import React from "react";
import {
  View,
  TextInput,
  KeyboardAvoidingView,
  ScrollView
} from "react-native";
const Button = require("Button");
const InputAccessoryView = require("InputAccessoryView");
const inputAccessoryViewID = "inputAccessoryView1";
const Dimensions = require("Dimensions");

class Demo extends React.Component {
  state = {
    height: 50,
    backgroundColor: "yellow"
  };

  render() {
    const { width } = Dimensions.get("window");
    return (
      <KeyboardAvoidingView
        style={{
          backgroundColor: "blue",
          flex: 1,
          alignItems: "center",
          justifyContent: "center"
        }}
        behavior="position"
      >
        <ScrollView
          keyboardDismissMode="interactive"
          contentContainerStyle={{
            flex: 1,
            alignItems: "center",
            justifyContent: "center"
          }}
        >
          <TextInput
            placeholder="Email"
            style={{
              height: 50,
              backgroundColor: "white",
              width: width - 30
            }}
            inputAccessoryViewID={inputAccessoryViewID}
          />
        </ScrollView>
        <InputAccessoryView nativeID={inputAccessoryViewID}>
          <View
            style={{
              backgroundColor: this.state.backgroundColor,
              width,
              height: this.state.height
            }}
          >
            <Button
              onPress={() =>
                this.setState({
                  height: 200,
                  backgroundColor: "red"
                })
              }
              title="Change Input Style"
            />
          </View>
        </InputAccessoryView>
      </KeyboardAvoidingView>
    );
  }
}

export default Demo;

0 个答案:

没有答案