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

Question

我有背景透明图像（屏幕截图中的浅蓝色）。问题是当我在文本框中输入内容时，会出现垂直滚动并且表单会向上移动一点。背景是否也可能随着滚动而移动？

#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>

标签： react-native

Answer 1

澄清一下，您希望表单固定显示在图像背景上方，并且表单和图像背景在您滚动时一起移动。那么，目前您的背景是固定的，但表单在上方并且独立于背景滚动？

我只是想确保我的问题是正确的:)

我认为当您使用 ImageBackground 时，它总是会以这种方式运行，因此是“背景”。如果您希望表单与图像一起移动，您可以尝试将表单以“绝对”位置定位在常规 Image 组件的顶部。您可能想尝试使用 react-native-elements 或 react-native-paper 因为它们有 Card 和 Surface 组件可以帮助实现这种行为。

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

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