React Native组件位置不起作用

Question

我是React Native的新手。我需要将电子邮件字段移动到屏幕的上方位置。我尝试了不同的方式，但我无法获得更好的结果。我附上了我的样式代码。它是如果有人可以帮助我，我感到非常高兴。谢谢你。

     return (
          <ImageBackground
            style={{
              backgroundColor: '#ccc',
              flex: 1,
              position: 'absolute',
              width: '100%',
              height: '100%',
              justifyContent: 'center',
            }}
          >

          <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Email"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               />
          </ImageBackground>
        );
      }
    }

export default AuthScreen;

const styles = StyleSheet.create ({
    input: {

        margin: 15,
        height: 41,
        borderColor: '#979797',
        borderWidth: 1,
        borderRadius:4,
        backgroundColor:'#FFFFFF',
        shadowColor: '#000000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.8,
        shadowRadius: 2,
        elevation: 1,
    }
 })

Answer 1

在ImageBackground中添加/更改此属性：

    flexDirection: 'column',
    justifyContent: 'flex-start',
    alignItems: 'center'

应该有效

编辑你的第二个问题：

我真的建议您查看here以了解使用React的FlexBox的基础。另外，我建议您在View组件中包装和分组您的项目（从＆＃39; react-native＆＃39;中导入）。因此，首先使用以下样式的视图包装TextInput：

     <View
       style = {{
         width:'100%',
         marginTop: 'your_margin',
         alignItems: 'flex-start'
       }}
      > 
       <TextInput style = {styles.input}
           underlineColorAndroid = "transparent"
           placeholder = "Email"
           placeholderTextColor = "#9a73ef"
           autoCapitalize = "none"
           />
     </View>

然后将所需的width属性添加到styles.input