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

当键盘激活时，它不会坚持到位。您可能需要使用keyboardavoidingview或其他软件包，例如react-native-keyboard-aware-scroll-view因此，键盘激活后设计可能不会打扰。

固定位置f

1 个答案: