React Native：带有 flex 的 ScrollView 和布局元素

Question

您好，我正在尝试添加一个 ScrollView，但它没有像预期的那样工作。

如果我将 flex:1 添加到 ScrollView，那么我可以设置子元素的样式，但没有滚动条，所以我无法滚动。 如果我删除 flex:1 或将其更改为 flexGrow 则我有滚动条，但子元素的样式已损坏。

如何将 i ScrollView 和样式添加到孩子？

我需要一些信息为什么会发生。谢谢。

import React, { useContext, useState, useEffect } from 'react';
import {
  Text,
  TextInput,
  StyleSheet,
  View,
  TouchableOpacity,
  Alert,
  ScrollView,
} from 'react-native';

import { globalStyles } from '../styles/global';
import colors from '../styles/color';

import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Feather from 'react-native-vector-icons/Feather';
import * as Animatable from 'react-native-animatable';

import Button from '../components/Button';



const SignInScreen = (props) => {


  return (
    <View style={styles.container}>
      <ScrollView contentContainerStyle={styles.scrollViewContainer}>
        <View style={styles.containerTop}>
          <Text style={globalStyles.h1}>Login</Text>
        </View>
        <View style={styles.containerBottom}>
          <View style={styles.viewAction}>
            <FontAwesome name='user-o' color='#ccc' size={20} style={{ width: 20 }} />

            <TextInput
              style={[styles.input]}
              placeholder="Your Email"
              value={data.email}
              autoCapitalize='none'
              onChangeText={(val) => textInputEmailChange(val)}
            />

          </View>

          <View style={styles.viewAction}>
            <FontAwesome name='lock' color='#ccc' size={20} style={{ width: 20 }} />

            <TextInput
              style={[styles.input]}
              placeholder="Password"
              value={data.password}
              autoCapitalize='none'
              secureTextEntry={data.secureTextEntry ? true : false}
              onChangeText={(val) => handlePasswordChange(val)}
            />

            <TouchableOpacity onPress={updateSecureTextEntry}>
              {data.secureTextEntry ? <Feather name='eye-off' color='#ccc' size={20} style={{ width: 20 }} />
                : <Feather name='eye' color='#80c904' size={20} style={{ width: 20 }} />
              }
            </TouchableOpacity>

          </View>

          {uiErrors.errors ? (<Text style={styles.errorMsg}>{uiErrors.errors}</Text>) : (<Text></Text>)}

          <Button
            content={'Login'}
            buttonStyles={{ marginVertical: 20, paddingVertical: 15, }}
            onPress={handleLogin}
          />
          <Button
            content={'Login'}
            buttonStyles={{ marginVertical: 20, paddingVertical: 15, }}
            onPress={handleLogin}
          />

          <Button
            content={'Login'}
            buttonStyles={{ marginVertical: 20, paddingVertical: 15, }}
            onPress={handleLogin}
          />

          <Button
            content={'Login'}
            buttonStyles={{ marginVertical: 20, paddingVertical: 15, }}
            onPress={handleLogin}
          />
          <Button
            content={'Login'}
            buttonStyles={{ marginVertical: 20, paddingVertical: 15, }}
            onPress={handleLogin}
          />

          <Button
            content={'Create an account'}
            buttonStyles={{ backgroundColor: 'transparent' }}
            textStyles={styles.signUpBtnText}
            onPress={() => { navigation.navigate('SignUp'); }}
          />

        </View>
      </ScrollView>
    </View>
  )
}

const styles = StyleSheet.create({

  container: {
    flex: 1,
    backgroundColor: colors.light_theme.splashgb,
  },
  scrollViewContainer: {
    // flex: 1,
    // flexGrow: 1,
    // justifyContent: 'space-between'
  },
  containerTop: {
    flex: 1, // it add this only if flex:1 is added to scrollViewContainer but the then i can't scroll.
    padding: 25,
    backgroundColor: 'blue'
  },
  containerBottom: {
    flex: 1,
    padding: 25,
    flexDirection: 'column',
    backgroundColor: colors.light_theme.container,
    borderTopLeftRadius: 25,
    borderTopRightRadius: 25,
  },

  viewAction: {
    flexDirection: 'row',
    width: '100%',
    borderBottomWidth: 1,
    borderBottomColor: colors.light_theme.lightgray,
    paddingVertical: 0,
    alignItems: 'center',
  },

  input: {
    flex: 1,
    padding: 15,
  },

  text: {
    color: colors.light_theme.white,
  },
  errorMsg: {
    color: colors.light_theme.errorMsg,
    fontSize: 14,
    marginVertical: 5,
  },

  signUpBtnText: {
    color: colors.light_theme.primary
  }

});

export default SignInScreen;

Answer 1

1：将您的 ScrollView 放入 View：

... <View><ScrollView> ... </ScrollView></View> ...

2：从你的 scrollViewContainer 样式中删除“flex:1”，这样它就只适用于 fexGrow 和 justifyContent