首页 文章

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

提问于
浏览 次
0

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

I want to implement questions like this.

所以我尝试在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>

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

enter image description here

这是我的 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"
  }
}
react-native native-base

3 回答

  • 0

    文本中的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>
    回复于
  • 0

    我修正了我的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.

    回复于
  • 0

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

    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

    回复于

相关问题