Question

正在学习react-native，尝试创建停靠在屏幕底部的菜单。有没有办法可以在停靠在导航菜单like this messenger menu顶部的ScrollView中显示屏幕内容？点击消息图像时，在同一页面中显示消息屏幕内容。

         return (<View style={styles.container}>
          <ScrollView>
            <Text style={styles.content}>
              {this.state.content}</Text>
          </ScrollView>
          <View style={styles.footer}>
            <TouchableOpacity onPress={this.navigateMessage}>
              <Image source={require('../img/messages.png')} style={[
                  styles.tabIcon, {
                    tintColor: this.state.messagesTint
                  }
                ]}/>
            </TouchableOpacity>
            <TouchableOpacity onPress={this.navigateContacts}>
              <Image source={require('../img/contacts.png')} style={[
                  styles.tabIcon, {
                    tintColor: this.state.contactsTint
                  }
                ]}/>
            </TouchableOpacity>
          </View>
        </View>);

Answer 1

当状态更改/调用setState（）时，React Native会重新呈现内容。

你可以这样做。

// inside constructor
this.initStateData = {
     date: '',
     selectedTourType: 0,
     tourType: [],
     group: false,
     no_of_days: 5,
     scheduled: false,
     search_text: '',
     searchedRegion: '',
     budget: null,
     editing: null,
     path: [],
     makers: [],
     selected: false,
     pressedIndex: 0,
     users: [],
     selected_users: [],
     destination: null,
     mapModalVisible: false,
     milestoneModalVisible: false,
     predictions: [],
     searchedRegionPredictions: [],
     polygons: []
    };
this.state = { ...this.initStateData };

和你的TouchableOpacity onPress：

this.setState = { ...this.state , ...this.initStateData };

react-native导航菜单底部停靠的导航菜单

1 个答案: