使用本机响应的文本输入

Question

我正在尝试创建一个带有 react native 的文本输入框。

模板(有效(类似于：

const App: () => React$Node = () => {
return (
<>
<Text>Hello world</Text>
</>
);
};
export default App;

我尝试了以下文本输入方案：

const App: () => React$Node = () => {
constructor(props) {
super(props);
this.state = {text: ''};
}
return (
<>
<Text>Hello world</Text>
<TextInput
style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
<Text style={{padding: 10, fontSize: 42}}>
{this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
</Text>
</>
);
};

我收到以下错误：

错误：

转换错误语法错误：[路径]\App.js：意外的令牌，预期的";">

通常，格式(也可以工作(是这样的：

export default class PizzaTranslator extends Component {
constructor(props) {
super(props);
this.state = {text: ''};
}
render() {
return (
<View style={{padding: 10}}>
<TextInput
style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
<Text style={{padding: 10, fontSize: 42}}>
{this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
</Text>
</View>
);
}
}

但我认为，应该有一种方法可以使用箭头函数向模板添加文本输入。 我缺少什么明显的东西吗？

Answer 1

在 React native 中创建文本输入非常简单。这应该会有所帮助。

import React, { useState } from 'react';
import { TextInput, View, Text } from 'react-native';
const App: () => React$Node = () => {
const [value, setValue] = useState()
return (
<>
<Text>Hello world</Text>
<TextInput
style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={(text) => setValue(text)}
value={value}
/>
<Text style={{padding: 10, fontSize: 42}}>
{value
.split(" ")
.map(word => word && "🍕")
.join(" ")}
</Text>
</>
);
};
export default App

Answer 2

您可以尝试此代码段，只需复制粘贴即可？它对我这边有用。我猜你的代码格式会创建语法错误。

import React, { useState } from "react";
import { SafeAreaView, View, Text, TextInput } from "react-native";
const App = () => {
const [text, setText] = useState("");
return (
<SafeAreaView>
<View style={{ padding: 10 }}>
<TextInput
style={{ height: 40 }}
placeholder="Type here to translate!"
onChangeText={text => setText(text)}
value={text}
/>
<Text style={{ padding: 10, fontSize: 42 }}>
{text
.split(" ")
.map(word => word && "🍕")
.join(" ")}
</Text>
</View>
</SafeAreaView>
);
};
export default App;