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;