标签: react-native-text

我想创建Text组件并将它们连续显示,就像spanhtml中的元素一样.如果我这样做:

<View>
  <Text> Start here, </Text> <Text> finish here </Text>
</View>

他们之间的线断了,它看起来像:

从这里开始,
到此为止

如何防止断线并将它们显示在同一条线上？

我必须将我要显示的第一个字母大写.我搜索它但我找不到明确的事情,也没有这样的道具text反应本机官方文档.

我用以下格式显示我的文本:

<Text style={styles.title}>{item.item.title}</Text>

要么

<Text style={styles.title}>{this.state.title}</Text>

我该怎么做？

建议欢迎？

我<Text/>在iOS中遇到了React-Native 组件的奇怪问题.

我想将borderBottomWidth样式应用到<Text/>组件中,但它不起作用.但是,该borderWidth选项有效.

• 工作 <Text style={{borderWidth:1}}> React Native </Text>

• 没工作 <Text style={{borderBottomWidth:1}}> React Native </Text>

有没有办法只将底层边框应用到<Text/>组件中？

谢谢!

注意:

我知道以下提到的方法是为了实现这一点,但在我的情况下,我需要将样式仅应用于<Text/>组件.

1. 我们可以试着换<View/>到<Text/>和应用borderBottomWidth样式的<View/>.(borderBottomWidth工作正常<View/>)
2. 将<View/>下面的<Text/>内容添加到可能看起来像一条线的组件中.

令人惊讶的是,在Stack Overflow上没有一个问题可以将这些组合在一起.关于斜体或强调的SO没有答案,事实上,只有这个问题是大胆的.我在下面自我回答了这个问题.

使用React native 0.26,

我的组件是这样的

const Search = () => {
    return (
      <View style={styles.backgroundImage}>
        <TextInput style={styles.textInput} onChangeText={(text) => console.log(text)} placeholder={"Enter Search Term"}/>
      </View>
    )
}

我的风格:

const styles = StyleSheet.create({
  backgroundImage: {
    flex : 1,
    flexDirection: "column",
    justifyContent: 'center',
    alignItems: 'center'
  },
  textInput: {
    justifyContent: "center",
    alignItems: "stretch",
    borderRightWidth: 30,
    borderLeftWidth: 30,
    height: 50,
    borderColor: "#FFFFFF",
  }
})

我面临的问题是

1. 边框右边的宽度和左边的宽度似乎没有任何效果,占位符文本只是从左边缘开始.
2. TextInput的背景是"灰色",它与View的背景相同.我原以为它默认为白色(感觉透明).
3. 使用iOS模拟器如何调出键盘,我想设置returnKeyType并查看键盘的外观(并且有一些代码onSubmitEditing和测试).

截图如下:

我几天前开始使用react-native工作,经过一些广泛的搜索,我无法找到2个(简单？)问题的答案:

1. 如何更改react-native 中所有Text组件的颜色？什么是最佳做法？使用样式创建自己的Text组件并在任何地方重复使用它？

2. 更改TextInput的默认文本颜色.我设法改变了占位符颜色,也改变了android中的下划线颜色,但是我找不到任何关于如何更改输入文本颜色(保持黑色)的内容.

3. 无论如何我可以改变一切的字体/文字颜色吗？似乎缺少此选项.

感谢您的帮助和欢呼

在React Native中,我有一个<Text numberOfLines={5}>正常工作的元素,但是当文本在换行符之前被剪切时却没有.

例如,在此屏幕截图中,第一部分工作正常,但在第二部分中,在"Transport:"之后立即存在换行符,然后文本继续,但React Native不显示省略号,因此用户赢了"知道有文字被剪裁.

这可能吗？我看到了Text prop lineBreakMode的一些PR,但看起来它还没有发布.那个道具会解决这个问题吗？在当前版本的React Native中有一种简单的方法吗？

我的 React Native 应用程序中有TextInput组件，当我添加secureEntryText: 'true'密码输入时，我注意到两件事：

1）当我输入密码时，输入密码的左边缘移出输入框的左侧，如下所示：

2）当我取消密码输入焦点时，无论密码有多长，输入的密码末尾都会有一个省略号，如下所示：

有谁知道我如何解决这些问题？

如果我的<Text />标签正确接收props.header为文本，我想用 Jest 和 Enzyme 进行单元测试。

通常我能够<Text />像这样测试标签的内容：

it("should render a label", () => {
  expect(wrapper.find(Text).contains("submit")).toBe(true);
});

但是一旦我传递了一个对象，这就不再可能了。让我演示给你看：

const createTestProps = props => ({
  header: SOME_CONSTANT,
  ...props
});

...

  let wrapper;
  let props;
  beforeEach(() => {
    props = createTestProps();
    wrapper = shallow(<MyList {...props} loaded={false} />);
  });

  it("should render a header", () => {
    expect(wrapper.find(Text).contains(props.header)).toBe(true);
  });

这失败并显示以下错误消息：

? MyList › rendering › still loading › should render a header

    expect(received).toBe(expected) // Object.is equality

    Expected: true …

好的，让我们简单点。我有两个Text部分，一个在另一个内部。第一个Text具有fontSizeof 60，而嵌套的具有fontSizeof 20。随着字体大小的变化，嵌套Text坐底对齐。我希望嵌套的Text 垂直中心与父中心对齐。

码

// @flow
import React, { Component } from 'react';
import { Text } from 'react-native';

type PropTypes = {}
export default class SampleVC extends Component<PropTypes> {
    render() {
        return (
            <Text style={{ fontSize: 60 }}>
                Big Text
                <Text style={{ fontSize: 20 }}>Small Text</Text>
            </Text>
        );
    }
}

电流输出

所需输出

我知道这是一个简单的场景，但是作为本机响应的新​​功能，我无法弄清楚。我在网上搜索了所有内容，但找不到任何有用的资源。

你好我想实现以下风格：

但通过以下代码，我在单独的列中得到图标，在另一列中得到文本

<View style={{flex:1, flexDirection:'row'}}>
  <Icon height={10} width={10} />
  <Text>It is a long established fact that a reader will be distracted by the readable 
    content of a page when looking at its layout. The point of using Lorem Ipsum is that it 
    has a more-or-less normal distribution of letters, as opposed to using 'Content here, 
    content here'
</Text>
</View>

请忽略不同的图标。有什么办法解决这个问题吗？

我正在尝试制作一个搜索屏幕，我有一个 FlatList 填充屏幕中所有未使用的空间，并具有将填充设置为 10 的样式。我现在有硬编码数据只是为了测试它在什么时候看起来像我一直向下滚动，最后一个文本元素被切成两半......如果我删除填充它会正确显示最后一个项目，但文本显示粘在 FlatList 的边框上，并向每个 FlatList 项目添加填充看起来像矫枉过正（正如有人在另一篇文章中建议的那样）。

导入屏幕.js：

const results = [
    'asdasdasd',
    'dasd cxzceewrw',
    'rewr',
    'jyuyjkyuj ky',
    'iuyiuyiyuiuyiyuiyu',
    'uyigfhg gerte ert',
    'tert ert r ert',
    'asdasdasd',
    'dasd cxzceewrw',
    'rewr',
    'jyuyjkyuj ky',
    'iuyiuyiyuiuyiyuiyu',
    'uyigfhg gerte ert',
    'tert ert r ert',
    'asdasdasd',
    'dasd cxzceewrw',
    'rewr',
    'jyuyjkyuj ky',
    'iuyiuyiyuiuyiyuiyu',
    'uyigfhg gerte ert',
    'tert ert r ert',
    'asdasdasd',
    'dasd cxzceewrw',
    'rewr',
    'jyuyjkyuj ky',
    'iuyiuyiyuiuyiyuiyu',
    'uyigfhg gerte ert',
    'tert ert r ert',
    'dasd cxzceewrw',
    'rewr',
    'jyuyjkyuj ky',
    'iuyiuyiyuiuyiyuiyu',
    'uyigfhg gerte ert',
    'tert …

我是 React Native (0.59.3) 的新手，我正在尝试为我的应用程序中的所有组件设置默认字体Text。我已阅读/sf/answers/3354779291/和如何在 React Native for IOS 应用程序中禁用字体缩放？。

在我的App.js我已经放入：

import { Text } from 'react-native';

Text.defaultProps.style = { 
  fontFamily: 'AmericanTypewriter' //just for testing
}

但我明白了Cannot set property 'style' of undefined。

当我在此之前添加行时Text.defaultProps = Text.defaultProps || {};，我没有收到错误，但什么也没有发生（所有Text组件仍然使用默认字体）。我尝试使用不同的字体（内置 iOS 字体和我链接并验证的自定义字体），使用它们的 PostScript 名称，但没有任何反应。

我究竟做错了什么？