Question

我正在使用expo开发一个React Native应用，并且我将它用作多个标签的入门代码。在主屏幕上，我在父视图中有一个顶部的滚动视图，然后是导航信息栏：

      <View style={styles.getStartedContainer}>

        {this._maybeRenderDevelopmentModeWarning()}

        <Text style={styles.getStartedText}>Get started by opening</Text>

        <View style={[styles.codeHighlightContainer, styles.homeScreenFilename]}>
          <MonoText style={styles.codeHighlightText}>screens/HomeScreen.js</MonoText>
        </View>

        <Text style={styles.getStartedText}>
          Change this text and your app will automatically reload.
        </Text>
      </View>

      <View style={styles.helpContainer}>
        <TouchableOpacity onPress={this._handleHelpPress} style={styles.helpLink}>
          <Text style={styles.helpLinkText}>Help, it didnâ€™t automatically reload!</Text>
        </TouchableOpacity>
      </View>
      <View style = {styles.getStartedContainer}>
            <TextInput
                  style={{height: 40}}
                  placeholder="username"
                  onChangeText={(text) => this.setState({username})}
                />
                <Text style={{padding: 10, fontSize: 42}}>
                  {this.state.username.split(' ').map((word) => word && 'ðŸ•').join(' ')}
                </Text>
                </View>
                <View style = {styles.getStartedContainer}>
                <TextInput
                  style={{height: 40}}
                  placeholder="password"
                  onChangeText={(text) => this.setState({password})}
                />
                <Text style={{padding: 10, fontSize: 42}}>
                  {this.state.password.split(' ').map((word) => word && 'ðŸ•').join(' ')}
                </Text>
                </View>
                <View>
                    <Text>a
                    </Text>
                    </View>
    </ScrollView>

    <View style={styles.tabBarInfoContainer}>
      <Text style={styles.tabBarInfoText}>This is a tab bar. You can edit it in:</Text>

      <View style={[styles.codeHighlightContainer, styles.navigationFilename]}>
        <MonoText style={styles.codeHighlightText}>navigation/MainTabNavigator.js</MonoText>
      </View>
    </View>
  </View>

但是，滚动视图的某些内容（特别是密码的文本输入）隐藏在InfoBar选项卡的后面。我猜这是因为我没有正确设置scrollview的高度，所以它也占用了相同的空间，但是我不知道如何解决它，以使scrollview的高度位于顶部部件未被InfoBar占用。这是样式表：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  developmentModeText: {
    marginBottom: 20,
    color: 'rgba(0,0,0,0.4)',
    fontSize: 14,
    lineHeight: 19,
    textAlign: 'center',
  },
  scrollContainer: {
      flex: 0.8,
  },
  contentContainer: {
    paddingTop: 30,
  },
  welcomeContainer: {
    alignItems: 'center',
    marginTop: 10,
    marginBottom: 20,
  },
  welcomeImage: {
    width: 100,
    height: 80,
    resizeMode: 'contain',
    marginTop: 3,
    marginLeft: -10,
  },
  getStartedContainer: {
    alignItems: 'center',
    marginHorizontal: 50,
  },
  homeScreenFilename: {
    marginVertical: 7,
  },
  codeHighlightText: {
    color: 'rgba(96,100,109, 0.8)',
  },
  codeHighlightContainer: {
    backgroundColor: 'rgba(0,0,0,0.05)',
    borderRadius: 3,
    paddingHorizontal: 4,
  },
  getStartedText: {
    fontSize: 17,
    color: 'rgba(96,100,109, 1)',
    lineHeight: 24,
    textAlign: 'center',
  },
  tabBarInfoContainer: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    ...Platform.select({
      ios: {
        shadowColor: 'black',
        shadowOffset: { height: -2 },
        shadowOpacity: 0.1,
        shadowRadius: 3,
      },
      android: {
        elevation: 5,
      },
    }),
    alignItems: 'center',
    backgroundColor: '#fbfbfb',
    paddingVertical: 20,
  },
  tabBarInfoText: {
    fontSize: 17,
    color: 'rgba(96,100,109, 1)',
    textAlign: 'center',
  },
  navigationFilename: {
    marginTop: 5,
  },
  helpContainer: {
    marginTop: 15,
    alignItems: 'center',
  },
  helpLink: {
    paddingVertical: 15,
  },
  helpLinkText: {
    fontSize: 14,
    color: '#2e78b7',
  },

我已经尝试将scrollview的flex设置为0.8并将InfoBar设置为0.2，但这似乎没有用。任何帮助将不胜感激。

具有绝对定位的视图会隐藏ScrollView的尾部内容

0 个答案: