在使用反应 - 本文效应时样式中的问题

Question

嗨，我想渲染akira组件，但它没有正确显示在屏幕上，并且它被另一个组件覆盖，有人可以帮助我解决这个问题吗？

我认为问题与我的主视图的样式有关，就像我将组件放在此包装组件外面时，它会出现在页面开头。

 return (
      <View style={styles.wrapper}>
        <Image style={styles.image} source={{ uri: moneyScoreLogo }} />
        <Text style={styles.text}>Charge your account  </Text>
        <Akira
          style={{ alignSelf: 'stretch' }}
          label={'amount'}
       
          borderColor={'#a5d1cc'}
          inputPadding={16}
          labelHeight={24}
          labelStyle={{ color: '#ac83c4' }}
        />
        <MainButton onPress={() => onButtonClicked(amount)}>Charge</MainButton>
        <Text style={styles.warning}>{warning}</Text>
      </View>
    );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
  text: {
    fontSize: 20,
    marginBottom: 10,
    color: colors.gray03,
  },
  image: {
    width: 300,
    height: 300,
    alignSelf: 'center',
    marginTop: 15,
    marginBottom: 20,
  },
  warning: {
    fontSize: 15,
    color: colors.red,
    marginTop: 5,
  },
});

Answer 1

我知道答案，我只是从styles.wrapper中删除了flex：1，一切顺利。