Merhabalar;


Listeye tıkladığımızda ikinci bir liste tekrar açılır. İkinci ekranda herhangi bir öğeyi tıklarsam üçüncü ekran açmak istiyorum. Switch yapısında ListComponents.js dosyasını kullandım. Ayrıca gün boyunca bir yazı paylaştım. Sorunu nasıl çözebilirim. Teşekkür ederim. Saygılar.



ListComponents.js

import React, { Component } from "react";
import {AppRegistry,View, Text, FlatList, ActivityIndicator} from "react-native";
import { List, ListItem, SearchBar } from "react-native-elements";


class ListComponents extends Component {
constructor(props) {

super(props);

this.state = {
loading: false,
data: [],
page: 1,
seed: 1,
error: null,
refreshing: false
};
}


renderSeparator = () => {
return (
<View
style={{
height: 1,
width: "98%",
backgroundColor: "#CED0CE",
marginLeft: "2%"
}}
/>
);
};

renderHeader = () => {
return <SearchBar placeholder="Type Here..." lightTheme round />;
};

renderFooter = () => {
if (!this.state.loading) return null;

return (
<View
style={{
paddingVertical: 20,
borderTopWidth: 1,
borderColor: "#CED0CE"
}}
>
<ActivityIndicator animating size="large"/>
</View>
);
};

render() {
return (

<List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
<FlatList
data={this.props.data}
renderItem={({ item }) => (
<ListItem
roundAvatar
title={`${item.name}`}
subtitle={item.coders}
//avatar={{ uri: item.picture.chessLogo }}
containerStyle={{ borderBottomWidth: 0 }}
//onPress = { this.OpenThirdActivityFunction.bind(this)}
//onPress = { this.OpenThirdActivityFunction.bind(this,item.code rs )}
/>
)}
keyExtractor={item => item.coders}
ItemSeparatorComponent={this.renderSeparator}
ListHeaderComponent={this.renderHeader}
ListFooterComponent={this.renderFooter}
/>
</List>
);
}
}


export default ListComponents;



FlatListDemo.js // Uygulamanın açıldığı sayfa

import React, { Component } from "react";
import {AppRegistry,Button,Alert,StyleSheet, View, Text, FlatList, ActivityIndicator,WebView } from "react-native";
import { List, ListItem, SearchBar } from "react-native-elements";

import { StackNavigator } from 'react-navigation';
import ListComponents from './src/components/ListComponents';
import {alapinCtrl,alekhineCtrl} from './src/components/chessListData';
import opening from "./opening_List.json";


class ThirdActivity extends Component
{
static navigationOptions =
{
title: 'ThirdActivity',
};

render()
{
return (

<View>

<Text>3</Text>

</View>

);

}
}

class SecondActivity extends Component
{
static navigationOptions =
{
title: 'SecondActivity',
};


OpenThirdActivityFunction ()
{
// this.props.navigation.navigate('Third');
}


render()
{
switch (this.props.navigation.state.params.deneme) {
case 1:
return (
<View>
<ListComponents data={alapinCtrl}/>
</View>
);
case 2:
return (
<View>
<ListComponents data={alekhineCtrl}/>

</View>
);
case 3:
return (
<View style={styles.lvl2}>


</View>
);
case 4:
return (
<View style={{ flex:1 }}>

<WebView
scrollEnabled={false}
javaScriptEnabled={true}
scalesPageToFit={false}
automaticallyAdjustContentInsets={false}
style={ styles.WebViewContainer }
source={{uri: 'https://chessmicrobase.com/microbases/10/games/208?token=kpj3f9ez&embedded=1#hp-'}}
/>

</View>
);
default:
return (
<View style={styles.lvl2}>
<Text>Null</Text>
</View>
);
}
}
}

class FlatListDemo extends Component {
constructor(props) {
super(props);

this.state = {
loading: false,
data: [],
page: 1,
seed: 1,
error: null,
refreshing: false
};
}
static navigationOptions =
{
title: 'App'
};

OpenSecondActivityFunction (uid)
{
Alert.alert(
'Alert Title',
uid.toString(),

{ cancelable: false }
)

this.props.navigation.navigate('Second', { deneme: uid });
}

renderSeparator = () => {
return (
<View
style={{
height: 1,
width: "86%",
backgroundColor: "#CED0CE",
marginLeft: "14%"
}}
/>
);
};

renderHeader = () => {
return <SearchBar placeholder="Type Here..." lightTheme round />;
};

renderFooter = () => {
if (!this.state.loading) return null;

return (
<View
style={{
paddingVertical: 20,
borderTopWidth: 1,
borderColor: "#CED0CE"
}}
>
</View>
);
};

ListeDoldur (opening) {
var json_fragment = opening.results;
return json_fragment;
}

render() {
return (

<List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
<FlatList
data={this.ListeDoldur(opening)}
renderItem={({ item }) => (
<ListItem
roundAvatar
title={`${item.name.openingName}`}
subtitle={item.name.trapsNumber}
avatar={{ uri: item.picture.chessLogo }}
containerStyle={{ borderBottomWidth: 0 }}
onPress ={ this.OpenSecondActivityFunction.bind(this, item.uid) }
/>
)}
keyExtractor={item => item.uid}
ItemSeparatorComponent={this.renderSeparator}
ListHeaderComponent={this.renderHeader}
ListFooterComponent={this.renderFooter}
/>
</List>
);
}
}

var styles = StyleSheet.create({
lvl2: {
flexDirection: 'row',
backgroundColor: 'yellow',
justifyContent: 'center',
alignItems: 'center',
},
lvl1: {
padding: 10,
flexDirection: 'row',
backgroundColor: 'red',
justifyContent: 'center',
alignItems: 'center',
},
WebViewContainer: {
justifyContent: 'center',
alignItems: 'center'
}
});

export default ActivityProject = StackNavigator(
{
First: { screen: FlatListDemo },

Second: { screen: SecondActivity },

Third: { screen: ThirdActivity }

});

AppRegistry.registerComponent('ActivityProject', () => ActivityProject);