【问题标题】: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

【问题讨论】:

    标签: javascript css typescript react-native native-base


    【解决方案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
    猜你喜欢
    • 1970-01-01
    • 2012-05-23
    • 1970-01-01
    • 2020-08-12
    • 1970-01-01
    • 2016-11-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多