Я использую более простой метод, но он еще не анимирован. У меня есть состояние компонента, называемое «bumpedUp», которое по умолчанию равно 0, но устанавливается в 1, когда textInput получает фокус, например:
В моем тексте Вход:
onFocus={() => this.setState({bumpedUp: 1})}
onEndEditing={() => this.setState({bumpedUp: 0})}
У меня также есть стиль, который придает контейнеру для упаковки всего на этом экране нижнее поле и отрицательное верхнее поле, например:
mythingscontainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
},
bumpedcontainer: {
marginBottom: 210,
marginTop: -210,
},
И затем на контейнере для упаковки я устанавливаю такие стили:
<View style={[styles.mythingscontainer, this.state.bumpedUp && styles.bumpedcontainer]}>
Итак, когда состояние «bumpedUp» установлено в 1, стиль bumpedcontainer запускает и перемещает содержимое вверх.
Kinda hacky и поля жестко закодированы, но он работает:)