本机基础文本仅在某些屏幕上显示大写字母

问题描述

我在2个不同的组件中使用本机基础文本。在默认情况下，除非我添加uppercase={false}，否则默认情况下该文本以大写形式显示。

export const ActionButton: React.FunctionComponent<ActionButtonProps> = ({
  style,disabled,buttonText,onPress,}) => {
  return (
    <Button rounded onPress={onPress} disabled={disabled} style={[styles.button,style]}>
      <Text uppercase={false} style={styles.text}>{buttonText}</Text>
    </Button>
  );
};

const styles = StyleSheet.create({
  button: {
    width: moderateScale(160),height: moderateScale(50),backgroundColor: '#31C283',justifyContent: 'center',},text: { color: 'white',fontSize: moderateScale(13,0.7),fontWeight:'600' },});

但是，在以下组件中，即使不使用大写= false，文本也是小写的。为什么这两个部分不同？我在做什么错了？

export const TripOptionsSelector: React.FunctionComponent = () => {
  const navigation = useNavigation();
  return (
    <View style={styles.offerContainer}>
      <Text style={styles.offerText}>Jetzt</Text>
      <Text style={styles.offerText}>1 Person</Text>
      <Text style={styles.offerText} onPress={()=>navigation.navigate('TripFilter')}>Filter</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  offerContainer: {
    flexDirection: 'row',offerText: {
    color: 'white',marginRight: moderateScale(20),paddingHorizontal: 10,fontSize: moderateScale(14),borderColor: 'white',borderWidth: 1,borderRadius: 10,alignItems: 'center',});

CodesandBox：https://snack.expo.io/@nhammad/trusting-hummus

解决方法

文本没有错， 实际上，“本机基本按钮”使它成为孩子的文本大写。 这是源代码https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/Button.js

 const children =
  Platform.OS === PLATFORM.IOS
    ? this.props.children
    : React.Children.map(this.props.children,child =>
        child && child.type === Text
          ? React.cloneElement(child,{
            uppercase: this.props.buttonUppercaseAndroidText === false
            ? false : variables.buttonUppercaseAndroidText,...child.props
          })
          : child
      );