如何从 react-native listview 项目打开其他屏幕答案

【问题标题】：How to open other screen from react-native listview item如何从 react-native listview 项目打开其他屏幕
【发布时间】：2017-12-18 11:53:44
【问题描述】：

当我对listview 的任何项目执行onPress 时，我正在尝试打开另一个屏幕。

<TouchableHighlight underlayColor={AppColors.black}
                            onPress={Actions.SubCategoryList(item.guid)}>
        <View>
                 <Item style={{flexDirection: 'row', height: 50, borderBottomWidth: borderWidth}}>
                    <Text style={{
                        fontFamily: AppStyles.fontFamily,
                        fontSize: 17,
                        flex: 5,
                        color: AppColors.black
                    }}>{item.category_name}</Text>
                    <Item style={{flex: 1, borderBottomWidth: 0, flexDirection: 'row', justifyContent: 'flex-end'}}>
                        <Text style={{
                            color: AppColors.grey,
                            fontFamily: AppStyles.fontFamily,
                            fontSize: 17,
                            marginRight: 15
                        }}>{item.active_tournaments}</Text>
                        <Image resizeMode="contain" source={require('../../assets/images/right.png')}
                               style={{width: 15, height: 15, marginTop: 3}}/>
                    </Item>
                </Item>
            </View>
        </TouchableHighlight>

但是每当我进入当前屏幕时，它直接进入子类别屏幕而不点击。

我想知道如何在另一个屏幕上捕获从当前屏幕发送的数据。

【问题讨论】：

使用箭头函数onPress={()=>{Actions.SubCategoryList(item.guid)}}
我已经试过了，但是当我说什么也没发生。

标签： react-native react-native-ios react-native-router-flux react-native-listview

【解决方案1】：

问题是您实际上是立即调用onPress 而不是将其设置为回调。您可以在以下代码中看到这一点：

onPress={Actions.SubCategoryList(item.guid)}

您有两种选择来解决此问题。您的第一个选择是在其中添加一个函数调用，如下所示：

onPress={() => Actions.SubCategoryList(item.guid)}

您的第二个选择是更改 Actions.SubCategoryList 函数以返回如下回调：

export function SubCategoryList(guid){
  return () => { // this gets called by onPress

    /* contents of function go here */

  }
}

理想情况下，为了提高性能，您还可以保留基于 guid 创建的回调的缓存，并返回缓存的副本而不是创建新副本。这称为记忆化，看起来像这样：

let cache = {};
export function SubCategoryList(guid){
  return cache[guid] || (cache[guid] = () => { 

    /* contents of function go here */

  })
}

【讨论】：

【解决方案2】：

我曾尝试在点击登录时使用列表视图，请参阅示例代码

constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(['row 1', 'row 2']),
    };
  }    
<View>
        <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) => 
      <TouchableHighlight onPress={()=>{console.log("clicked-- data-->>",rowData)}}>
      <Text>{rowData}</Text>
        </TouchableHighlight>}
      />
        </View>

【讨论】：

【解决方案3】：

您可以轻松使用StackNavigator，它允许您在屏幕中导航，传递参数，即：您可以这样使用的列表项：

class HomeScreen extends React.Component {
    static navigationOptions = {
    title: 'Welcome',
    };
    render() {
        const { navigate } = this.props.navigation;
        return (
        <Button
          title="Go to Jane's profile"
          onPress={() =>
          navigate('Profile', { name: 'Jane' }) // Sth. you want to pass to next view/screen
           }
        />
    );
    }
}

然后在所需的屏幕中，您可以从道具中获取您想要的项目：例如。

initialRoute={{
   component: MyScene,
   title: 'My Initial Scene',
   passProps: {myProp: 'foo'},
}}

另一个很好的参考： React Navigation ComdeMentor

【讨论】：