如何從反應原生列表視圖項目打開其他屏幕項目

我想在我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>

但是，無論何時我在當前屏幕上，它都會直接進入子類別屏幕而無需點擊。

我想知道如何捕獲從另一個屏幕上的當前屏幕發送的數據。

來源

2017-12-18 Sandeep Mishra

使用箭頭功能onPress = {（）=> {Actions.SubCategoryList（item.guid）}} –

我已經嘗試過，但是當我把任何事情都不是發生。 –

的問題是，你實際上是調用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 */ 

    }) 
}

來源

2017-12-18 13:31:41 Mobius

我一直在使用列表視圖上點擊登錄嘗試，看到示例代碼

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>

來源

2017-12-18 12:40:49

你可以很容易地使用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

來源

2017-12-18 13:05:46

如何從反應原生列表視圖項目打開其他屏幕項目

回答

相關問題