固定位置f

Question

嗨，我是新的反应本地。我想问问如何修正这三种颜色的位置，因为每次我尝试点击搜索文本输入时，键盘上升，这三种颜色也会上升。我试过position: 'fixed'，但它没有奏效。

Screenshot

这里也是代码：

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

它将不会被粘住键盘激活时的位置。您可能需要使用keyboardavoidingview或其他包装，如react-native-keyboard-aware-scroll-view因此，设计时可能不会打扰键盘激活。