如何在使用Native Base的React Native中的Text内使用Textinput或Input

Question

我正在尝试使用Native Base开发React Native的应用程序。我想填写这样的空白问题。

所以我尝试在Native Base的Text组件中使用React Native的Textinput组件或Native Base的Input组件，如下所示。但它在Android上运行不佳。 （渲染句子中没有输入部分。）

如何在文本中使用Textinput或Input？

<View>
  <Text>
    <TextInput width={40}></TextInput>
    <Text>is a knowledge community in which we can ask programming questions and we can answer others’ programming questions.</Text>
  </Text>
</View>

<View>
  <Text>
    <Input width={40}></Input>
    <Text>is a knowledge community in which we can ask programming questions and we can answer others’ programming questions.</Text>
  </Text>
</View>

这是渲染图像。没有输入部分。

这是我的package.json。

{
  "name": "AwesomeProject",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-native-scripts": "1.9.0",
    "jest-expo": "23.0.0",
    "react-test-renderer": "16.0.0"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "expo": "^23.0.4",
    "react": "16.0.0",
    "react-native": "0.50.3"
  }
}

Answer 1

文本中的TextInput需要具有高度和宽度。这将有效。

<View style={{marginTop: 100}} >
    <Text>
      <TextInput style={{height: 20, width: 100 }} />
      is a knowledge community in which we can ask programming questions and we can answer others’ programming questions.
    </Text>
</View>

Answer 2

我修复了我的App.js，指的是Tirth Shah的答案如下。

import React from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';

export default class App extends React.Component {
  render() {
      return (
        <View style={{marginTop: 100}} >
            <Text>
                 <TextInput style={{height: 20, width: 100 }} />
                 is a knowledge community in which we can ask programming questions and we can answer others’ programming questions.
           </Text>
        </View>
    );
  }
}

但它还不能很好地运作。结果如下。

This is the result.

Answer 3

我找到了一个问题的解决方案。但我认为这不是直截了当的方式，所以如果有可能请告诉我更简单的解决方案。

import React from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';

export default class App extends React.Component {
  separateText = (text) => {
    return text.split("").map((_val, _index, _arr) => {
      return (
        <Text key={_index}>{_val}</Text>
      );
    });
  }

  render() {
      return (
        <View style={{marginTop: 100, flexDirection: 'row', flexWrap: 'wrap'}}>
           <TextInput style={{width: 40}}></TextInput>
           {this.separateText(`is a knowledge community in which we can ask programming questions and we can answer others’ programming questions.`)}
        </View>
    );
  }
}

这就是结果。

RESULT