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

Posted 2023-03-13

【中文标题】本机基础文本仅在某些屏幕上显示大写

【英文标题】：native base Text showing uppercase on only some screens

【发布时间】：2020-12-19 09:57:10

【问题描述】：

我在 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',
    justifyContent: 'center',
  ,
);

代码沙盒：https://snack.expo.io/@nhammad/trusting-hummus

【参考方案1】：

Text没有错， 实际上 Native Base Button 使它成为孩子的文本大写。 这里是源代码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
      );

【讨论】：

我的问题是为什么文本在某些屏幕上是大写的，而在另一个屏幕上是小写的。

因为您已将 Text 放入 Button（在 ActionButton 文件中）。但你还没有在 TripOptionsSelector 文件中这样做

所以？为什么按钮会有所不同？

如果你不希望它是大写的，你应该将 buttonUppercaseAndroidText = false 传递给 Button