ios鍵盤覆蓋位於屏幕底部的輸入

ios鍵盤覆蓋位於屏幕底部的輸入。這個麻煩怎麼解決？ios鍵盤覆蓋位於屏幕底部的輸入

這裏是代碼。

<Content style={styles.content}> 

      <Form> 
       <Item style={{borderBottomColor:'#42e8f4'}}> 
       <Icon active name='mail' style={{color: '#42e8f4'}} /> 
       <Input placeholder='Email'placeholderTextColor= '#42e8f4' style={{color:'#0dc49d'}}/> 
       </Item> 
       <Item style={{ borderBottomColor:'#42e8f4'}}> 
       <Icon active name='lock' style={{color: '#42e8f4'}} /> 
       <Input secureTextEntry={true} placeholder='Password'placeholderTextColor= '#42e8f4' style={{color:'#42e8f4'}}/> 
       </Item> 
      </Form> 
      <ListItem style={{borderBottomWidth:0,borderTopWidth:0,borderBottomColor:'#42e8f4'}}> 
       <Button transparent onPress={() => this.props.navigation.navigate("Signup")}> 
       <Text style={{color:'#42e8f4'}}>Create Account</Text> 
       </Button> 
      <Button transparent onPress={() => this.props.navigation.navigate("Forgetpass")}> 
       <Text style={{color:'#42e8f4'}}>Forget Password</Text> 
      </Button> 
      </ListItem> 
      <Button full 
       style={{backgroundColor:'#42e8f4'}} 
       onPress={() => this.props.navigation.navigate("Welcome")}> 
       <Text style={{color: '#FFF'}}>Sign In</Text> 
      </Button> 
      </Content> 

const styles = { 
    content:{ 
    position:'absolute', 
    bottom:10, 
    left:0, 
    right:0 
    }, 
}

我正在使用Native-Base。這個問題怎麼解決？

來源

2017-09-20 NewTech Lover

檢查文檔React Native Keyboard Avoiding View。

這是一個解決常見視圖問題的組件，需要移除虛擬鍵盤的方式。它可以根據鍵盤的位置自動調整的位置或底部填充。從

例的How to make your React Native app respond gracefully when the keyboard pops up文章

return (
    <KeyboardAvoidingView 
     style={styles.container} 
     behavior="padding" 
    > 
     <Image source={logo} style={styles.logo} /> 
     <TextInput 
     placeholder="Email" 
     style={styles.input} 
     /> 
     <TextInput 
     placeholder="Username" 
     style={styles.input} 
     /> 
     <TextInput 
     placeholder="Password" 
     style={styles.input} 
     /> 
     <TextInput 
     placeholder="Confirm Password" 
     style={styles.input} 
     /> 
     <View style={{ height: 60 }} /> 
    </KeyboardAvoidingView> 
);

來源

2017-09-20 09:45:58 bennygenel

容器的問題是，上面的代碼，我寫的是圖像裏面，圖像就像整個屏幕的容器。我必須在哪裏集成上面的代碼？我在圖像後添加了它，而應用程序沒有在2分鐘左右渲染，並且沒有任何錯誤消息。 –

@NewTechLover我在你的問題中沒有看到任何'Image'組件。您應該包裝您想要通過鍵盤避免的主要組件。在你的例子中，這應該是'Content'組件。 – bennygenel

它解決了ios謝謝。但是，當我使用它是偉大的android版本受到影響從這個解決方案。我怎樣才能指定這隻爲ios？我使用expo，因此每個平臺都沒有單獨的文件夾。 –

你可以使用這個庫react-native-keyboard-aware-scroll-view只是使它爲你的組件

來源

2017-09-20 16:09:31

ios鍵盤覆蓋位於屏幕底部的輸入

回答

相關問題