Question

我很反应原生发展。我做了一些研究，但没有按照我想要的方式开展工作。我的* .js文件有两个组件。一个是星级评定的组成部分。另一个包含基本视图。在视图内我添加了一个按钮。我想要发生的是，当用户点击按钮时，来自文本字段的输入（alredy working）和当前评级被收集以通过电子邮件发送。

问题： 1）这只能通过实施通量模式/使用redux来实现吗？ 2）如果是：所有redux组件（actions，reducer，store）是否必须在单独的文件中吐出？ 3）如果否：如何？

这是我目前的代码：

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  TextInput,
  View
} from 'react-native';
import StarRating from 'react-native-star-rating';
import Button from 'react-native-button';
import {Actions} from 'react-native-router-flux';

export class GeneralStarExample extends Component {

  constructor(props) {
    super(props);
    this.state = {
      starCount: 4
    };
  }

  onStarRatingPress(rating) {
    this.setState({
      starCount: rating
    });
  }

  render() {
    return (
      <StarRating
        disabled={false}
        maxStars={5}
        rating={this.state.starCount}
        selectedStar={(rating) => this.onStarRatingPress(rating)}
        starColor={'gold'}
        emptyStarColor={'gold'}
      />
    );
  }
}

export default class FeedbackView  extends Component {

  constructor(props) {
    super(props);
    this.state = { text: 'Useless Placeholder' };
  }

  render () {
    return(

      <View style={styles.container}>
      <GeneralStarExample onUserInput={this.handleUserInput}/>
      <View style ={styles.textinput}>
        <TextInput
          style={{height: 240, width: 300, alignSelf: 'center', borderColor: 'gray', borderWidth: 1}}
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}
          />
      </View>
      <Button onPress={() => Actions.refresh({text: this.state.text, rating: this.props.rating})}>Senden</Button>
      <Text>{this.props.text}</Text>
      <Text>{this.props.rating}</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

非常感谢， Defrian

Answer 1

1）您不一定需要实现Redux或任何类似Flux的架构，但在我看来这是一个非常好的方法。 Redux可以帮助您保持代码的清洁和可扩展性。

2）当然，你可以将所有这些放在一个文件中。你的减速器和动作基本上只是功能。对于商店，只需从redux模块中调用createStore()即可创建它。

从另一个组件读取组件状态

1 个答案: