Question

按下/单击后，我对颜色变化进行了许多研究。最后我获得了用于更改状态的脚本，并将其放在TouchableHighlight中。但是，当我单击该按钮时，只有“ underlayColor = {'gray'}”有效。我能知道点子吗？

这是我的代码

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  StatusBar ,
  TouchableOpacity,
  View,
  FlatList,
  ActivityIndicator,
  TouchableHighlight,
  PropTypes,
  Image,
  Alert
} from 'react-native';

import Logo from '../components/Logo';
import Form from '../components/Front';

import {Actions} from 'react-native-router-flux';

export default class Login extends Component<{}> {
  constructor() {
    super();
    this.state = {
      dataSource: {},
      pressed: false
    };
  }

  izijackpotconfirm() {
      Actions.izijackpotconfirm()
  }
  componentDidMount() {
    var that = this;
    let items = Array.apply(null, Array(25)).map((v, i) => {
      return { id: i+1 };
    });
    that.setState({
      dataSource: items,
    });
  }
 static navigationOptions = {
    title: "Izi Jackpot",
    headerStyle: {
      backgroundColor: "#354247"
    },
    headerTintColor: "#fff",
    headerTitleStyle: {
      fontWeight: "bold"
    }
  };
    render() {

    var jackpotNumbers = [];
    let btn_class = this.state.black ? "NormalSet" : "SelectedSet";

        return(
      <View style={styles.container}>
        <View style={styles.middlecontainer}>
          <Text style={styles.logoText}>Please Select 5 Numbers and Submit</Text>
        </View>
        <FlatList
          data={this.state.dataSource}
          renderItem={({ item }) => (
            <View style={{ flex: 1, flexDirection: 'column', margin: 1 }}>
            <TouchableHighlight
                onPress={() => {  Alert.alert(this.state.pressed) }}
                style={[
                    styles.iziPizi,
                    this.state.pressed ? { backgroundColor: "blue" } : {}
                ]}
                onHideUnderlay={() => {
                    this.setState({ pressed: false });
                }}
                onShowUnderlay={() => {
                    this.setState({ pressed: true });
                }}

                underlayColor={'gray'}
            >
                <Text style={styles.buttonText}>{ item.id}</Text></TouchableHighlight>
            </View>
          )}
          //Setting the number of column
          numColumns={5}
          keyExtractor={(item, index) => index}
        />

        <View style={styles.middlecontainer}>
         <TouchableOpacity style={styles.button} onPress={this.izijackpotconfirm} >
           <Text style={styles.buttonText}>Submit</Text>
         </TouchableOpacity>     
        </View>
      </View>

            )
    }
}
const styles = StyleSheet.create({
  container : {
    backgroundColor:'#6F9000',
    justifyContent: 'center',
    flex: 1,
    paddingTop: 30,

  },
  middlecontainer: {
    textAlign: 'center',
    alignItems: 'center',
    justifyContent :'center',
    flex:1    
  },
  signupTextCont : {
    flexGrow: 1,
    alignItems:'flex-end',
    justifyContent :'center',
    paddingVertical:16,
    flexDirection:'row'
  },
  signupText: {
    color:'rgba(255,255,255,0.6)',
    fontSize:16
  },
  signupButton: {
    color:'#ffffff',
    fontSize:16,
    fontWeight:'500'
  },
  iziPizi: {
    width: 55,
    padding: 15,
    margin: 5,

    borderRadius: 80,
    borderWidth: 2,
    borderColor: '#FFFFFF',
    flex:1
  },
  iziPiziPress: {
    width: 55,
    padding: 15,
    margin: 5,
    backgroundColor:'#1c313a',
    borderRadius: 80,
    borderWidth: 2,
    borderColor: '#FFFFFF',
    flex:1
  },
  button: {
    width:300,
    backgroundColor:'#1c313a',
     borderRadius: 25,
      marginVertical: 10,
      paddingVertical: 13
  },
  buttonText: {
    fontSize:16,
    fontWeight:'500',
    color:'#ffffff',
    textAlign:'center'
  },
  logoText : {
    color:'#FFFFFF',
    fontSize: 16,
    fontWeight: '500',
    alignItems: 'center',
    justifyContent:'center',
  },
  imageThumbnail: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 100,
  },
});

再说一遍，我在这里使用了FlatList。请帮忙。提前致谢。

Answer 1

是的。 FlatList中存在一个问题。但我不知道这是什么问题。请使用Route::get('/', function () { return view('welcome'); }); Auth::routes(['register' => false]); Route::get('/home', 'HomeController@index')->name('home'); Route::get('register/activation/{code}', 'Auth\\RegisterController@activation')->name('register.activation'); Route::group(['prefix' => 'admin', 'middleware' => ['auth']], function() { Route::get('/user-apps/list-index', ['as' => 'user-apps.list-index', 'uses' => 'Admin\\UserAppsController@listIndex']); Route::get('/user-apps/resend-confirmation', ['as' => 'user-apps.resend-confirmation', 'uses' => 'Admin\\UserAppsController@resendConfirmation']); Route::resource('/user-apps', 'Admin\\UserAppsController'); Route::get('/user/list-index', ['as' => 'user.list-index', 'uses' => 'Admin\\UserController@listIndex']); Route::resource('/user', 'Admin\\UserController'); Route::get('/dzikir-playlist-category/list-index', ['as' => 'dzikir-playlist-category.list-index', 'uses' => 'Admin\\DzikirPlaylistCategoryController@listIndex']); Route::resource('/dzikir-playlist-category', 'Admin\\DzikirPlaylistCategoryController'); Route::get('/dzikir-playlist/list-index', ['as' => 'dzikir-playlist.list-index', 'uses' => 'Admin\\DzikirPlaylistController@listIndex']); Route::resource('/dzikir-playlist', 'Admin\\DzikirPlaylistController'); Route::get('/dzikir-playlist-homepage/list-index', ['as' => 'dzikir-playlist-homepage.list-index', 'uses' => 'Admin\\DzikirPlaylistHomepageController@listIndex']); Route::resource('/dzikir-playlist-homepage', 'Admin\\DzikirPlaylistHomepageController'); Route::get('/dzikir-playlist-my-zikir/list-index', ['as' => 'dzikir-playlist-my-zikir.list-index', 'uses' => 'Admin\\DzikirPlaylistMyZikirController@listIndex']); Route::resource('/dzikir-playlist-my-zikir', 'Admin\\DzikirPlaylistMyZikirController'); Route::get('/greeting-chat/list-index', ['as' => 'greeting-chat.list-index', 'uses' => 'Admin\\GreetingChatController@listIndex']); Route::resource('/greeting-chat', 'Admin\\GreetingChatController'); Route::get('/foundation-donate/list-index', ['as' => 'foundation-donate.list-index', 'uses' => 'Admin\\FoundationDonateController@listIndex']); Route::resource('/foundation-donate', 'Admin\\FoundationDonateController'); Route::get('/asmaul-husna/list-index', ['as' => 'asmaul-husna.list-index', 'uses' => 'Admin\\AsmaulHusnaController@listIndex']); Route::resource('/asmaul-husna', 'Admin\\AsmaulHusnaController'); Route::get('/guidance/list-index', ['as' => 'guidance.list-index', 'uses' => 'Admin\\GuidanceController@listIndex']); Route::resource('/guidance', 'Admin\\GuidanceController'); Route::get('/content-category/list-index', ['as' => 'content-category.list-index', 'uses' => 'Admin\\ContentCategoryController@listIndex']); Route::resource('/content-category', 'Admin\\ContentCategoryController'); Route::get('/duas/list-index', ['as' => 'duas.list-index', 'uses' => 'Admin\\DuasController@listIndex']); Route::resource('/duas', 'Admin\\DuasController'); Route::get('/zakat/list-index', ['as' => 'zakat.list-index', 'uses' => 'Admin\\ZakatController@listIndex']); Route::resource('/zakat', 'Admin\\ZakatController'); Route::get('/quote/list-index', ['as' => 'quote.list-index', 'uses' => 'Admin\\QuoteController@listIndex']); Route::resource('/quote', 'Admin\\QuoteController'); Route::get('/playlist-song-category/list-index', ['as' => 'playlist-song-category.list-index', 'uses' => 'Admin\\PlaylistSongCategoryController@listIndex']); Route::resource('/playlist-song-category', 'Admin\\PlaylistSongCategoryController'); Route::get('/playlist-song/list-index', ['as' => 'playlist-song.list-index', 'uses' => 'Admin\\PlaylistSongController@listIndex']); Route::resource('/playlist-song', 'Admin\\PlaylistSongController'); Route::get('/album/list-index', ['as' => 'album.list-index', 'uses' => 'Admin\\AlbumController@listIndex']); Route::resource('/album', 'Admin\\AlbumController'); Route::get('/artist/list-index', ['as' => 'artist.list-index', 'uses' => 'Admin\\ArtistController@listIndex']); Route::resource('/artist', 'Admin\\ArtistController'); Route::get('/article/list-index', ['as' => 'article.list-index', 'uses' => 'Admin\\ArticleController@listIndex']); Route::resource('/article', 'Admin\\ArticleController'); });中的ListItem。请记住，如果要使用ListItem，请在构造函数中更改

native-base

到

this.state = {
          dataSource: {}, 
          ...
}

使用数组insead。这是给您的示例代码。

this.state = {
      dataSource: [],
}

还定义onPress方法。您的代码中的另一个问题是您<View style={{ flex: 1, flexDirection: 'column', margin: 1 }}> <List> {this.state.dataSource.map( item => <ListItem> <TouchableHighlight onPress={() => {}} onShowUnderlay={this.onPress.bind(this)} > <Text style={styles.buttonText}>{ item.id}</Text> </TouchableHighlight> </ListItem> ) } </List> </View>中的setState。结果是所有元素样式都会更改。因此您所有的按钮pressed都会被更改。因此您必须定义backgroundColor标志f 或数组中的每个元素，并更改此标志

Answer 2

问题在于您如何使用Touchable内部的样式。我的建议是创建2种包含更改的样式：

  style={
      this.state.pressed ? styles.pressed : styles.iziPizi
  }

当然在可触摸的内容内：

<TouchableHighlight
  onPress={() => {  Alert.alert(this.state.pressed) }}
  style={
      this.state.pressed ? styles.pressed : styles.iziPizi
  }
  onHideUnderlay={() => {
      this.setState({ pressed: false });
  }}
  onShowUnderlay={() => {
      this.setState({ pressed: true });
  }}
  underlayColor={'gray'}
>

在React Native中单击TouchableHighlight后更改颜色

2 个答案: