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，一切进行得很顺利。

使用react-native-textinput-effects时出现样式问题

1 个答案: