React native React Native-背景图像应与文本一起滚动

React native React Native-背景图像应与文本一起滚动,react-native,React Native,我有背景透明图像(截图中的浅蓝色)。问题是,当我在文本框中键入内容时,会出现一个垂直滚动条,表单会向上移动一点。背景是否也可能随着滚动而移动 #1-屏幕截图中是移动的表单 #2-是背景图像 这是代码 <Container style={styles.container}> <ImageBackground source={loginbackground} style={{width: '100%',height:'100%' }}>

我有背景透明图像(截图中的浅蓝色)。问题是,当我在文本框中键入内容时,会出现一个垂直滚动条,表单会向上移动一点。背景是否也可能随着滚动而移动

#1-屏幕截图中是移动的表单

#2-是背景图像

这是代码

<Container style={styles.container}>    
       <ImageBackground source={loginbackground}  style={{width: '100%',height:'100%' }}>
         <Content> 
          <View style={{marginTop:margint,paddingLeft:30,paddingRight:30}}>           
             
               <View style={{marginTop:10}}>
                <Item style={{backgroundColor:'rgb(149,197,69)',borderRadius:8,borderWidth:1,borderColor:'rgb(117,170,70)'}}>               
                 <Image source={emailicon} style={{height:20,width:20,marginLeft:10,marginRight:10}}/>
                 <Input placeholder="Email" value={this.state.username} onChangeText={ (text) => this.setState({ username: text }) }  placeholderTextColor="rgb(240,240,240)" />
               </Item>
              </View>
               <View style={{marginTop:15}}>
                <Item style={{backgroundColor:'rgb(149,197,69)',borderRadius:8,borderWidth:1,borderColor:'rgb(117,170,70)'}}>               
                 <Image source={passwordicon} style={{height:20,width:20,marginLeft:10,marginRight:10}}/>
                 <Input placeholder="Password" secureTextEntry={true} value={this.state.Password} onChangeText={ (text) => this.setState({ Password: text }) }   placeholderTextColor="rgb(240,240,240)" />
               </Item>
              </View>
              {this.state.Loading==true?
               <ActivityIndicator
          animating={true}
          style={styles.indicator} />
              :
              <View>
              <View style={{flexDirection:'row',justifyContent:'center',marginTop:15}}>
              <View style={{width:'13%',justifyContent:'center'}}>
               <TouchableOpacity onPress={() => this._toggleRememberme()}>
                <Image source={this.state.isrememberme?checkboxcheck:checkboxuncheck} style={{width:28,height:28}}/>
               </TouchableOpacity>
              </View>
              <View style={{width:'41%',justifyContent:'center'}}>
               <Text onPress={() => this._toggleRememberme()} style={{fontSize:17,color:'rgb(56,56,56)'}} >Remember me</Text>
              </View>
              <View style={{width:'46%',justifyContent:'center'}}>
               <Text onPress={() => this.props.navigation.navigate("forgotpass")} style={{textAlign:'right', fontSize:17,color:'rgb(56,56,56)'}} >Forgot password?</Text>
              </View>
              </View>   
                <Text onPress={() => this.props.navigation.navigate("signup")} style={{textAlign:'center', textDecorationLine:'underline', fontSize:17,color:'rgb(56,56,56)',marginTop:15}} >Create an Account</Text>             
                <Button onPress={() => this.signin()} block style={{backgroundColor:'rgb(107,29,43)', marginTop:15,height:50, borderRadius:8,borderWidth:1,borderColor:'rgb(117,170,70)'}}>
                 <Text style={{color:'#fff',fontSize:19}}>Login</Text>
                </Button>   
                                
             </View>
              }
          </View>
         </Content>     
         </ImageBackground>
      </Container>

this.setState({username:text})占位符textcolor=“rgb(240240)”/>
this.setState({Password:text})占位符textcolor=“rgb(240240)”/>
{this.state.Loading==true?

为了澄清,您希望窗体在图像背景上方显示为固定,并且窗体和图像背景在滚动时一起移动。因此,当前您的背景是固定的,但窗体在图像背景上方并独立于背景滚动

我只是想确定你的问题是否正确:)

我认为当你使用ImageBackground时,它总是以这种方式运行,因此就是“背景”。如果你想让窗体随图像移动,你可以尝试用“绝对”来定位窗体放置在常规图像组件的顶部。您可能希望尝试使用react-native元素或react-native纸张,因为它们具有卡片和表面组件,这有助于实现此行为

我意识到这不是一个非常明确的答案,但我希望它在某种程度上有所帮助。此外,您可能只想检查您所使用的组件的任何样式道具,以及查看ImageBackground上的文档


很抱歉,我不能给你一个更好的答案。

图像和文本应该一起滚动,所以不确定如果不是ImageBackground,我应该使用什么?