固定位置f

Question

嗨，我是新来的。我想问如何确定这三种颜色的位置，因为每次我试图点击搜索文本输入和键盘向上，这三种颜色也会上升。我试过position: 'fixed'，但它没有起作用。

屏幕截图

以下也是代码：

render(){
    return(
      <View style={{flex: 1}}>
       <View style={{flex: 3, backgroundColor: '#E1F1FE'}}>
          <View style={styles.form}>
              <TextInput
              style={styles.input}
              placeholder = "Search"
              returnKeyType="go"
              underlineColorAndroid={'rgba(0,0,0,0)'}
              />
              <Icon name="search" size={20} color="#900" style={styles.label} />
          </View>
       </View>

       <View style={{flex: 1, backgroundColor: '#77D3F8'}}>

       </View>

       <View style={{flex: 1, backgroundColor: '#AEEAF2'}}>

       </View>

       <View style={{flex: 1, backgroundColor: '#39CFDE'}}>

       </View>

     </View>
    );
  }

和风格

import {StyleSheet} from 'react-native';

module.exports = StyleSheet.create({
  navBar: {
    backgroundColor: '#EAEAEC',
  },
  title: {
    color: '#rgba(0, 0, 0, 0.65)',
  },
  buttonText: {
    color: '#rgba(0, 0, 0, 0.45)',
  },
  style3:{
    fontSize: 35,
    color: '#fff',
    padding: 10,
    alignContent:'center',
    justifyContent: 'center',
  },
  style2: {
    flexDirection: 'row',
    alignContent: 'center',
    alignItems: 'center',
    flex:1
  },
  buttonstyle: {
    flex: 1
  },
  form:{
    flexDirection: 'row',
        borderBottomWidth:1,
        borderColor: '#00BBD1',
    marginTop:80,
    marginRight: 40,
    marginLeft: 40,
    alignContent: 'center',
    alignItems: 'center',
  },
  input: {
    height: 40,
    borderWidth: 0,
    flex: 1
  },
  label:{
    alignContent:'center',
    justifyContent: 'center',
    marginRight: 10,
    color: '#00BBD1'
  },
});

(预先谢谢:)

Answer 1

当键盘启动时，它将不会被固定在位置上。您可能需要使用键盘回避视图或其他包，如反应-本机-键盘感知-滚动视图，这样，当键盘启动时，设计就不会受到干扰。