十四、与ReactNative协作

如您所见，创建一个新的 React 本机应用非常简单，但是 React（使用 JSX）和 React 本机（使用带有对象样式的特殊标记）之间存在一些关键区别，即使这些样式也有一些限制，例如，让我们创建一个 flex 布局：

// Dependencies
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
class Home extends Component {
render() {
return (
justifyContent: 'center',
alignItems: 'center'
},
headerText: {
color: 'white'
},
columns: {
flex: 1
},
column1: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'red'
},
column1Text: {
color: 'white'
},
column2: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'blue'
},
column2Text: {
color: 'white'
},
column3: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'orange'
},
column3Text: {
color: 'white'
},
});
export default Home;


File: components/Home.js

您可能不喜欢查看大型文件（我也不喜欢），因此让我们将组件和样式分开：

import { StyleSheet } from 'react-native';
export default StyleSheet.create({
container: {
flex: 1,
height: 100
},
header: {
flex: 1,
backgroundColor: 'green',
justifyContent: 'center',
alignItems: 'center'
},
headerText: {
color: 'white'
},
columns: {
flex: 1
},
column1: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'red'
},
column1Text: {
color: 'white'
},
column2: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'blue'
},
column2Text: {
color: 'white'
},
column3: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'orange'
},
column3Text: {
color: 'white'
},
});


File: components/HomeStyles.js

然后在我们的Home组件中，我们可以导入样式并以与之前相同的方式使用它们：

// Dependencies
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
// Styles
import styles from './HomeStyles';
...


File: components/Home.js

以下是代码的结果：

但是有一些不寻常的事情。

如您所见，我为组件（headerText、column1Text 等）创建了样式，这是因为视图组件中不允许使用某些样式。例如，如果您尝试将color: 'white'属性添加到组件中，您将看到该属性不起作用，并且标题将包含黑色文本：

在本食谱中，我们将学习如何在 React Native 中处理事件，以及如何通过创建简单的 Todo 列表来处理状态。

对于这个配方，我创建了一个名为“MySecondReactNativeApp”的新 React 应用：

1. 创建一个src文件夹并将App.js文件移到里面。另外，修改此文件以包括我们的待办事项列表：

import React, { Component } from 'react';
import Todo from './components/Todo';
export default class App extends Component {
render() {
return (

);
}
}


File: src/App.js

1. 我们的Todo组件将是：

import React, { Component } from 'react';
import {
Text,
View,
TextInput,
TouchableOpacity,
ScrollView
} from 'react-native';
import styles from './TodoStyles';
class Todo extends Component {
state = {
task: '',
list: []
};
OnPressAddTask= () => {
if (this.state.task) {
const newTask = this.state.task;
const lastTask = this.state.list[0] || { id: 0 };
const newId = Number(lastTask.id + 1);
this.setState({
list: [{ id: newId, task: newTask }, ...this.state.list],
task: ''
});
}
}
OnPressDeleteTask= id => {
this.setState({
list: this.state.list.filter(task => task.id !== id)
});
}
render() {
const { list } = this.state;
let zebraIndex = 1;
return (
OnChangeText={(value) => this.setState({ task:
value })}
value={this.state.task}
/>
language-jsx"> import { StyleSheet } from 'react-native';
export default StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
height: 50
},
list: {
flex: 1
},
header: {
backgroundColor: '#333',
alignItems: 'center',
justifyContent: 'center',
height: 60
},
headerText: {
color: 'white'
},
inputText: {
color: '#666',
height: 40,
borderColor: 'gray',
borderWidth: 1
},
button: {
paddingTop: 10,
paddingBottom: 10,
backgroundColor: '#1480D6'
},
submitText: {
color:'#fff',
textAlign:'center',
paddingLeft : 10,
paddingRight : 10
},
task1: {
flexDirection: 'row',
height: 50,
backgroundColor: '#ccc',
alignItems: 'center',
justifyContent: 'space-between',
paddingLeft: 5
},
task2: {
flexDirection: 'row',
height: 50,
backgroundColor: '#eee',
alignItems: 'center',
justifyContent: 'space-between',
paddingLeft: 5
},
delete: {
margin: 10,
fontSize: 15
},
noTasks: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
noTasksText: {
color: '#888'
}
});


File: src/components/TodoStyles.js

我们在组件中做的第一件事是设置状态。task状态用于输入创建新项，list状态用于保存所有任务项：

state = {
task: '',
list: []
};


TextInput组件创建了一个输入元素，与 React 中的输入主要区别在于，它没有使用onChange方法，而是使用onChangeText，默认获取值，我们可以直接更新我们的状态：

Add a new task"
OnChangeText={(value) => this.setState({ task: value })}
value={this.state.task}
/>


TouchableOpacity组件用于处理点击事件（React Native 中的onPress，可以用作按钮。也许你想知道为什么我没有直接使用组件Button；这是因为在 iOS 上无法为按钮添加背景色，它只能在 Android 上使用背景色。使用TouchableOpacity（或TouchableHighlight）可以对样式进行个性化设置，它可以完美地作为一个按钮：

language-jsx"> {list.map((item, i) => {
zebraIndex = zebraIndex === 2 ? 1 : 2;
return (


如果我们没有任何任务，我们将看到“还没有任务，创建一个新任务！”消息。

如您所见，顶部有一个输入，其中有“添加新任务”占位符。让我们添加一些任务：

最后，我们可以通过点击 X 来删除任务；我将删除“支付租金”任务：

从这个基本的 Todo 列表中可以看到，我们学习了如何使用本地状态以及如何在 React Native 中处理单击和更改事件。