react-native - ReactNative - 带有 redux 的抽屉导航器

Question

抽屉导航器（reactnavigation v2）是否可以不更改屏幕而是更改 redux 状态？

例子：

api = [{id: 1, name: 'Pippo'}, {id: 2, name: 'Pluto'}, {id: 3, name: 'Paperino'}]

抽屉

Menu title 1
Menu title 2
Menu title 3

屏幕

Welcome **state.name**

单击元素 1 --> actionChangeName(element_1) --> state name = 'pippo'

 Screen -> Welcome Pippo

单击元素 2 --> actionChangeName(element_2) --> state name = 'pluto'

 Screen -> Welcome Pluto

单击元素 3 --> actionChangeName(element_3) --> state name = 'paperino'

 Screen -> Welcome Paperino

谢谢

标签： react-nativereduxreact-navigation

Answer 1

我解决了我的问题：

我创建了一个drawerNav，只有一个包含“Welcome **state.name**”的屏幕和一个名为DrawerMenu的contentComponent

createDrawerNavigator({ main: WelcomeScreen }, { contentComponent: DrawerMenu })

抽屉菜单（示例）：

class DrawerMenu extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.titleContainer}>
          <Text style={styles.title}> Drawer Menu </Text>
        </View>
        <ScrollView>
          {this._renderList()}
        </ScrollView>
      </View>
    );
  }

  _renderList = () => this.props.list.map(element => (
    <TouchableOpacity key={element.id} onPress={this._updateElementSelected(element.id)}>
      <Text>Menu title {element.id}</Text>
    </TouchableOpacity>
  );

  _updateElementSelected = (elementId) => () => {
    this.props.actionSetElementSelected(elementId, this.props.list);
    this.props.navigation.toggleDrawer();
  };
}